Fadeout Div после проблемой события OnClick

StackOverflow https://stackoverflow.com/questions/3453710

Вопрос

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

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

  • Когда щелкнутся элемент (.BTN-Leavecomment),

  • Hidden Div (#commenttype) раскрывается через Slidedown. Этот Hidden Div содержит две радиопередачи.

  • На щелчке / выборе «первой» кнопки «Первая» (.REVEAL_CCFORM) Я хотел бы, чтобы еще один скрытый диван был раскрыт (у меня все все работает до здесь)

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

Может кто-нибудь помочь с получением этого последнего пункта (чтобы Fadeout первый Hidden 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


});
Это было полезно?

Решение

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

$('.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/

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top