Jquery切换动画不透明度功能

Posted 2023-03-06

【中文标题】Jquery切换动画不透明度功能

【英文标题】：Jquery Toggle an animate opacity function

【发布时间】：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>

【问题讨论】：

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

【参考方案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/