2

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

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

  • 单击元素 (.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


});
4

1 回答 1

2

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

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

于 2010-08-10T22:04:31.623 回答