Jquery切换动画不透明度函数

时间:2014-07-25 16:49:37

标签: java javascript jquery jquery-animate opacity

当我点击"身份"时,我想" fromfrancetoggle"和" lamiettetoggle"出现。当我再次点击时,我只是希望它们消失。

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

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

5 个答案:

答案 0 :(得分: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/

答案 1 :(得分:1)

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

答案 2 :(得分:1)

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

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

答案 3 :(得分:1)

尝试

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

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

答案 4 :(得分:0)

我认为另一种选择是在这里使用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>

它应该适用于这种情况。