javascript - fadetoggle 2 倍如何(初学者)

标签 javascript jquery html css

查询

<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% 确定我明白你想要什么,但我已经为你做了这个 fiddle,它将切换两个面板:

 $(".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/

关于javascript - fadetoggle 2 倍如何(初学者),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34865267/

相关文章:

javascript - 如何在jquery中追加回表的排序列

javascript - 成功功能无法基于提交工作

html - 移动网站后的 CSS 问题

javascript - 为什么 Javascript 不使用 ex 单位添加高度?

html - 使用 <div> <a> <p> 在分区内水平对齐文本时出现问题

javascript - 通过简单脚本从元素中拆分特定文本

html - 在 JavaScript 中返回 NaN 的整数输出

javascript - d3.js 中的 d3.max() 与 math.max() 有什么区别?

javascript - 将 jQuery 事件应用于所有类元素?

javascript - 属性(property)范围问题?