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

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

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

  • Когда элемент (.btn-leavecomment) щелкнут,

  • скрытый div (#commenttype) открывается с помощью слайдера. Этот скрытый div содержит два переключателя.

  • При нажатии/выборе «первой» радиокнопки (.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


});

jquery fadein fadeout slidedown
person Phil    schedule 10.08.2010    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

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

******РЕДАКТИРОВАТЬ****

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

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

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

Посмотрите результат: http://jsfiddle.net/8bCAg/

person Ender    schedule 10.08.2010
comment
Привет - отлично работает! Большое спасибо. Я пробовал несколько разных вещей, но просто не мог заставить его работать. Я все еще изучаю JS на самом деле, так что все еще немного нуб. Единственное, что с этим сейчас происходит, это когда #commenttype DIV исчезает, #ccform_container привязывается или подскакивает туда, где был #commenttype DIV (до того, как он исчез). Это отвлекает от плавной анимации, которую пользователь видел ранее. Можем ли мы сделать так, чтобы #ccform_container медленно или плавно перемещался туда, где был #commenttype DIV, а не возвращался обратно? - person Phil; 11.08.2010