Question

    <script type="text/javascript">
        $(function (){
            $(".links").click(function(){ 
            $('.slider').stop(true,false).animate({right:  "0" }, 800, 'easeOutQuint' ); },
        function(){ 
            $(".slider").stop(true,false).animate({right: "-200" }, 800, 'easeInQuint' ); },1000);
        });

   </script>

我正在我的网站上建立一个小滑块。滑块位置为right: -200。它会滑动到位置right:0我想在点击页面上的任何其他位置后将其设置回动态right: -200。

我尝试了所有失败的方法。 toggle(slide)效果很好，但看起来并不好。

Answer 1

单击所有文档，停止当前动画，运行新动画 $(document).click(function () { $('.slider').stop(true).animate({right: -200}, 500); });

Answer 2

好吧，你走了

$(document).click(function(e){
   e.preventDefault();

   if($(e.target).closest("your_slider_selector").length) return;

   //here you can do what you want
});

Answer 3

在为滑块设置动画之前，将CSS值存储在变量中：

var right = $('.slider').css("right");

然后你可以使用变量：

$('.slider').stop(true).animate({right: right}, 800);

这是一个例子：http://jsfiddle.net/ctdjkrLx/2/

点击页面上任何地方的jQuery动画回来

3 个答案: