jQuery动画切换离开按钮

jQuery animate toggles away button

本文关键字：离开 按钮 动画 jQuery      更新时间：2023-09-26

我发现我的按钮正在滑动，尽管我试图将其设置为动画的切换点击。我基本上希望按钮在内容链接中滑出，而不会消失按钮。不确定我做错了什么？

$(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>

.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; 
    });
});
相关文章：