Jquery切换动画不透明度函数

Question

当我点击＆＃34;身份＆＃34;时，我想＆＃34; fromfrancetoggle＆＃34;和＆＃34; lamiettetoggle＆＃34;出现。当我再次点击时，我只是希望它们消失。

我尝试使用此代码，但我无法使用它。有人可以告诉我我的错误在哪里吗？

<script>
$(document).ready(function(){

$("#identity").click(function(){
    $("#fromfrancetoggle").animate({opacity: "0"}, 500 );
     $("#lamiettetoggle").animate({opacity: "0"}, 500 );
     $(".identity").addClass('active');

      $("#identity").click( function(e){
      e.preventDefault();
        if ($(this).hasClass("active") ) {
            $("#fromfrancetoggle").animate({opacity: "1"}, 500 );
            $("#lamiettetoggle").animate({opacity: "1"}, 500 );         
            $(this).removeClass("active");

             } else {

             $("#fromfrancetoggle").animate({opacity: "0"}, 500 );
             $("#lamiettetoggle").animate({opacity: "0"}, 500 );  
            $(this).addClass("active"); }

                        return false;
});
});
</script>

Answer 1

这样的事情：

HTML：

<input type="button" id="identity" value="identity button" />
<div id="fromfrancetoggle">fromfrancetoggle</div>
<div id="lamiettetoggle">lamiettetoggle</div>

Jquery的：

$("#identity").click(function(){
 $("#fromfrancetoggle").toggle();
 $("#lamiettetoggle").toggle();
});

工作小提琴：http://jsfiddle.net/robertrozas/VPLn9/

Answer 2

$("#identity").click(function(e){
 $("#fromfrancetoggle").toggle();
 $("#lamiettetoggle").toggle();
 $(this).toggleClass('active');
 e.preventDefault();
});

Answer 3

大部分是正确的，尽管你有一个额外的点击处理程序。这应该有效：

$(document).ready(function(){

    $("#identity").click(function(e){
        e.preventDefault();
        if ($(this).hasClass("active") ) {
            $("#fromfrancetoggle").animate({opacity: "1"}, 500 );
            $("#lamiettetoggle").animate({opacity: "1"}, 500 );         
            $(this).removeClass("active");
        } else {
            $("#fromfrancetoggle").animate({opacity: "0"}, 500 );
            $("#lamiettetoggle").animate({opacity: "0"}, 500 );  
            $(this).addClass("active"); 
        }
        return false;
    });
    $("#identity").trigger("click"); // initial fade
});

trigger()来电取代了最初的淡出效果 - 如果不是您想要的话，请删除它。

正如其他答案所述，您可以直接在jQuery选择器上调用toggle。

Answer 4

尝试

    $("#identity").on("click", function(e) {
      $(e.target).toggleClass("active");
      $("#fromfrancetoggle, #lamiettetoggle").toggle(500);
    });

jsfiddle http://jsfiddle.net/guest271314/m7swu/

Answer 5

我认为另一种选择是在这里使用CSS3'过渡'。写：

<style>
#fromfrancetoggle, #lamiettetoggle {
 transition: 0.5s;-moz-transition:0.5s;-webkit-transition:0.5s;
 opacity:0;
}
#fromfrancetoggle.visible, #lamiettetoggle.visible {
 opacity:0.99999;
}
</style>
<script>
$(document).ready(function(){

$("#identity").click(function(){
    $("#fromfrancetoggle,#lamiettetoggle").toggleClass("visible");
});
});
</script>

它应该适用于这种情况。