淡化切换 2 次如何(初学者)

fadetoggle 2 times how (Beginner)

本文关键字:初学者      更新时间:2023-09-26

Jquery

<script> 
//Team
$(document).ready(function(){
    $(".team").click(function(){
        $(".panel").fadeToggle("3000");
    });
    $(".team").click(function(){
        $(".teamh").fadeToggle("3000");
    });
}); 
</script>

.HTML

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
//Team
$(document).ready(function(){
    $(".team").click(function(){
        $(".panel").fadeToggle("3000");
    });
    $(".team").click(function(){
        $(".teamh").fadeToggle("3000");
    });
}); 
</script>
</head>
<body>
<!--Buttons-->
<a><span class="team"></span></a>
<a><span class="events"></span></a>
<a><span class="media"></span></a>
<a><span class="contact"></span></a>
<span class="panel"></span>
<span class="teamh"></span>
<script src="assets/js/bootstrap.min.js"></script> <span class="panel"></span>
</body>
</html>

上面你可以看到我试图淡化切换面板,当淡入时,我希望"按钮"悬停在 html 中,它是一个<a>标签。

所以我想:当 .team 切换到显示面板并添加我的悬停时。

我不是 100% 确定我理解你想要什么,但我为你做了这个小提琴,它将切换两个面板:

 $(".team").click(function()
    {       
                $(".teamh").fadeToggle("3000",function()
                    {
                     $(".panel").fadeToggle("3000");                     
                    });
    }   );

基本上,当您单击链接时,teamh 面板被切换 - 一个切换淡入淡出完成,它将切换另一个面板。 请注意,一个面板的显示设置为隐藏

https://jsfiddle.net/loanburger/rcy4vu8L/

它使用淡入淡出切换完成回调函数,然后切换另一个面板。

如果您只想切换两个面板,则只需在同一个单击处理程序中调用 fadeToggle:

 $(".team").click(function()
 {      
         $(".teamh").fadeToggle("3000");
         $(".panel").fadeToggle("3000");    
});

看这里: https://jsfiddle.net/loanburger/beeLqv6x/