onClick事件问题后，fadeOut div [英] fadeOut div after onClick event problem

问题描述

这是我第一次在这里发布信息，自从我找到该网站以来，在过去的几周中已经阅读了很多有用的东西！

this is my first time posting on here and have read alot of helpful stuff over the past few weeks since I found the site!

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

So, my question is: I have the following code on my site and what im trying to do is...

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

• When an element (.btn-leavecomment) is clicked,

隐藏的div(#commenttype)通过slideDown显示. 该隐藏的div包含两个单选按钮.

a hidden div (#commenttype) is revealed via slideDown. This hidden div contains two radio buttons.

在单击/选择第一个"单选按钮(.reveal_ccform)时，我希望显示另一个隐藏的div(我已经在这里完成了全部工作)

On click/selection of the 'first' radio button (.reveal_ccform) I would like another hidden div to be revealed (I have this all working up to here)

然后，我希望第一个隐藏的div(包含单选按钮(#commenttype))消失并逐渐消失(一旦用户仅选择了两个中的第一个单选按钮，第二个单选按钮重定向到另一个页面，以防万一.)

I'd then like the first hidden div (which contains the radio buttons (#commenttype)) to then disappear and fadeOut (once the user has selected only the first radio button of the two. The second radio button redirects to another page in case you were wondering.)

任何人都可以通过单击第一个单选按钮帮助获得最后一点(淡出第一个隐藏的div)吗?

Can anyone help with getting that last point (to fadeOut the first hidden div) on click of the first radio button?

谢谢

我的代码:

$(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


}); 

推荐答案

我觉得我必须缺少一些东西，因为与您已经在做的事情相比，这似乎很简单，但是在这里:

I feel like I must be missing something, because this seems pretty simple compared to what you're already doing, but here you go:

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

******编辑****

******EDIT****

要按照以下注释中的请求获得更平滑，更复杂的动画，请执行以下操作:

For a smoother and more complex animation as per the request in the following comment, do something like this:

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

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

This will create a custom animation to fade out the div containing the radio buttons while simultaneously reducing the height to zero, which will solve the jumping issue. The callback function removes the div after the animation is complete (not a necessary step, but keeps the DOM in line with what the user is seeing).

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

这篇关于onClick事件问题后，fadeOut div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！