Question

您可以在此处查看我当前的代码http://jsfiddle.net/Km3vf/6/。

我想点击按钮，将类应用于div，延迟，然后打开面板。在第二次单击时，它应该删除该类并向上滑动面板。

当我再次点击该按钮时，它会删除该类（完美），但不会切换幻灯片。有人可以帮帮我吗？

<html>
<div class="third">

    <h2 class="toggle">CLICK</h2>

    <div id="panel">
        <p>Panel details go here.</p>
    </div>

</div>
</html>

<style>
.third {
    width:33.3%;
    float:left;
    text-align:center;
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    transition: all ease 1s;
}
.full {
    width:100%;
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    transition: all ease 1s;
}
#panel {
    float:left;
    width:100%;
    height:300px;
    padding:2%;
    background:red;
    border:1px solid #fff;
    clear:both;
    display:none;
}
</style>

<script>
$(function(){
$('.toggle').click(function() {
    $(".third").toggleClass("full").queue(function(){
    $('#panel').slideToggle(1000).delay(1000);
});
});
});
</script>

Answer 1

删除队列可以解决问题，请在此处查看：http://jsfiddle.net/Km3vf/7/

我也改变了链中的延迟，所以现在它：

$('#panel').delay(1000).slideToggle(1000);

看看你想要的是什么。

如果你希望它在关闭时首先滑动，我恐怕你无法使用一个切换功能来完成它，但是必须检查当前状态稍作修改。

像这样：http://jsfiddle.net/Km3vf/8/

slideToggle和toggleClass一起工作？

1 个答案: