jquery - onClick事件后淡出div的问题

Question

这是我第一次在这里发帖，自从我发现这个网站以来，在过去的几周里我读到了很多有用的东西!

所以，我的问题是:我的网站上有以下代码，我想做的是......

• 单击元素 (.btn-leavecomment) 时，

• 通过 SlideDown 显示隐藏的 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


}); 

Answer 1

我觉得我一定错过了一些东西，因为与你已经在做的事情相比，这看起来相当简单，但是你开始了:

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