Question

我想要一个按钮显示并隐藏多个div。我遇到并且无法构建的问题是一个工作脚本，它在show / hide期间具有每个div转换，并且一旦完成就通过函数循环回来。

div.bg-1，div.content-1，div.link-1在页面加载时可见。

在button.btn上点击div.bg-1淡出显示div.bg-2，div.content-1向左滑动以显示div.content-2而div.link-1没有过渡但显示div.link -2。

在下一个按钮.btn点击div.bg-2淡化显示div.bg-3，div.content-2滑动左侧显示div.content-3而div.link-2没有过渡但显示div 。链路-3。

一旦div.bg-3显示在button.btn上，点击它会循环回来显示div.bg-1

<div class="bg-1 current display"></div>
<div class="bg-2 current"></div>
<div class="bg-3 current"></div>

<div class="content-1 current display"></div>
<div class="content-2 current"></div>
<div class="content-3 current"></div>

<div class="link-1 current display"> <a href="/foo"></a> </div>
<div class="link-2 current"> <a href="/alpha"></a> </div>
<div class="link-3 current"> <a href="/beta"></a> </div>

<button class="btn"></button>

我能够通过下面的脚本显示和隐藏div。但是我不认为这是最有效和最有效的方法，特别是为每个元素添加所需的不同过渡并循环回函数。

    $(".btn").click(function () {
    if ($(".current").next(".display").length) {
       $(".current").removeClass("current").next(".display").addClass("current");     
    }    
});

谢谢大家的推荐！我非常感谢任何意见和帮助。

Answer 1

你必须链接你的效果，你可以使用jquery ui effect http://jqueryui.com/effect/。例如，如果你使用盲人。

$(".btn").click(function () {
    $("#div1").show('blind', 1000, function () {
        $("#div2").show('blind', 1000, function () {
            $("#div3").hide('blind', 1000);
        });

    });

    );     

}

在这个例子中，div1将显示，1秒后div2将显示，1秒后div3将隐藏。你可以随心所欲地连接你想要的效果。

Jquery显示/隐藏带有过渡的多个div

1 个答案: