fadeOut div после проблемы с событием onClick - PullRequest
Новая
       18

fadeOut div после проблемы с событием onClick

2 голосов
/ 11 августа 2010

Это мой первый пост здесь, и я прочитал много полезного за последние несколько недель, с тех пор как я нашел сайт!

Итак, мой вопрос: у меня есть следующий код на моем сайте ито, что я пытаюсь сделать, это ...

  • При нажатии на элемент (.btn-leftcomment),

  • скрытый div (#commenttype) раскрывается через slideDown.Этот скрытый элемент содержит две кнопки-переключателя.

  • При нажатии / выборе 'первой' радиокнопки (.reveal_ccform) я хотел бы показать еще один скрытый div (у меня все это работает до сих пор)

  • Затем я бы хотел, чтобы первый скрытый элемент div (который содержит переключатели (#commenttype)) затем исчезал и исчезал (как только пользователь выбрал только первый переключатель из двух. Второйрадиокнопка перенаправляет на другую страницу, если вам интересно.)

Может ли кто-нибудь помочь с получением этой последней точки (для исчезновения первого скрытого div) при нажатии первой радиокнопки?

Спасибо

Мой код: 

$(document).ready(function(){

  // Click first element (.btn-leavecomment)
  // and reveal first hidden DIV (#commenttype)
  $(".btn-leavecomment").toggle(function(){   
        $("#commenttype").stop().animate({ down: "+=300" }, 3000)      
        $("#commenttype").stop().slideDown("slow");
   }, function(){
        $("#commenttype").stop().animate({ down: "-=300" }, 1400)      
        $("#commenttype").stop().slideUp("slow");  
  });     


  // on click of first radio (.reveal_ccform)     
  // Reveal second hidden DIV (ccform_container) 
  $(".reveal_ccform").toggle(function(){   
  $("#ccform_container").stop().animate({ down: "+=600" }, 6000)      
  $("#ccform_container").stop().slideDown("slow");    


  //fadeOut #commenttype onClick of .reveal_ccform after #ccform_container slidesDown


});

1 Ответ

2 голосов
/ 11 августа 2010

Я чувствую, что, должно быть, что-то упустил, потому что это кажется довольно простым по сравнению с тем, что вы уже делаете, но вот, пожалуйста: 

$('.reveal_ccform').click(function() {
    $('#commenttype').fadeOut();
});

****** ***** EDIT 1004 *

Для более плавной и сложной анимации в соответствии с запросом в следующем комментарии сделайте что-то вроде этого: 

$('.reveal_ccform').click(function() {
    $('#commenttype').animate({height: 0, opacity: 0}, function() {
        $(this).remove();
    });
});

Это создаст пользовательскую анимацию для исчезновения элемента div, содержащего переключатели, одновременно уменьшая высоту до нуля, что решит проблему с прыжками. Функция обратного вызова удаляет div после завершения анимации (не обязательный шаг, но поддерживает DOM в соответствии с тем, что видит пользователь).

См. Результат: http://jsfiddle.net/8bCAg/

...