javascript - jQuery animate 切换离开按钮

Question

我发现我的按钮滑开了，即使我试图将其设置为动画的切换单击。我基本上希望按钮滑出并滑入内容链接而不消失按钮。不确定我做错了什么？

$(document).ready(function(){
        $('#slidebottom button').toggle(function() {
            $("#outer-nav .navlink-1").animate({left: '-=50', top: '-=50'}, 500);
            $("#outer-nav .navlink-2").animate({left: '=0', top: '-=50'}, 500);
            $("#outer-nav .navlink-3").animate({left: '+=50', top: '-=50'}, 500);
            }, function() {
            $("#outer-nav .navlink-1").animate({left: '+=50', top: '+=50'}, 500);
            $("#outer-nav .navlink-2").animate({left: '=0', top: '+=50'}, 500);
            $("#outer-nav .navlink-3").animate({left: '-=50', top: '+=50'}, 500);
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="slidebottom">
   <button>Slide it</button>
   <div id="outer-nav">
     <div class="navlink-1">Link 1</div>
     <div class="navlink-2">Link 2</div>
     <div class="navlink-3">Link 3</div>
   </div>
</div>

Answer 1

.toggle()当您想要显示/隐藏元素时使用。由于您希望 #outer-nav 中的元素而不是切换按钮具有动画效果，因此您需要将代码更改为如下所示。

$(document).ready(function(){
    var isToggled = false;

    $('#slidebottom button').click(function() {
        if (!isToggled) {
            $("#outer-nav .navlink-1").animate({left: -50, top: -50}, 500);
            $("#outer-nav .navlink-2").animate({left: 0, top: -50}, 500);
            $("#outer-nav .navlink-3").animate({left: 50, top: -50}, 500);
        } else {
            $("#outer-nav .navlink-1").animate({left: 50, top: 50}, 500);
            $("#outer-nav .navlink-2").animate({left: 0, top: 50}, 500);
            $("#outer-nav .navlink-3").animate({left: -50, top: 50}, 500);
        }

        isToggled = !isToggled; 
    });
});