Question

这是我第一次在这里发帖，并且在我找到该网站后的几周内已经阅读了很多有用的东西！

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

点击元素（.btn-leavecomment）时，
通过slideDown显示隐藏的div（#commenttype）。这个隐藏的div包含两个单选按钮。
点击/选择“第一个”单选按钮（.reveal_ccform）我想要显示另一个隐藏的div（我已经完成了这一切）
然后我喜欢第一个隐藏的div（包含单选按钮（#commenttype））然后消失和fadeOut（一旦用户只选择了两个中的第一个单选按钮。第二个单选按钮如果您想知道，请重定向到另一个页面。）

点击第一个单选按钮，有人可以帮助获得最后一点（fadeOut第一个隐藏的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();
});

****** **** EDIT

根据以下评论中的请求，为了获得更流畅，更复杂的动画，请执行以下操作：

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

这将创建一个自定义动画，淡出包含单选按钮的div，同时将高度降低到零，这将解决跳跃问题。回调函数在动画完成后删除div（不是必要的步骤，但保持DOM与用户看到的一致）。

查看结果：http://jsfiddle.net/8bCAg/

onClick事件问题后fadeOut div

1 个答案: