Jquery切换动画不透明度功能答案

【问题标题】：Jquery Toggle an animate opacity functionJquery切换动画不透明度功能
【发布时间】：2014-09-17 14:21:48
【问题描述】：

当我点击“身份”时，我希望出现“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>

【问题讨论】：

您的脚本块末尾似乎缺少});。另外，您能否提供您在控制台中遇到的错误？

标签： java javascript jquery jquery-animate opacity

【解决方案1】：

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

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

在这种情况下应该可以工作。

【讨论】：

【解决方案2】：

试试

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

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

【讨论】：

【解决方案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。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

类似这样的：

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/

【讨论】：