jQuery 动画切换按钮

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() 用于 show/hide 元素。由于您希望 #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; 
    });
});

jQuery 动画切换按钮

jQuery animate toggles away button

javascript

jquery

toggle

jquery-animate