javascript - jQuery 在页面任意位置单击时向后滑动

Question

$(".links").click(function(){ 
    $('.slider').stop(true,false).animate({ right:  "0" }, 800, 'easeOutQuint'); 
}, function() { 
    $(".slider").stop(true,false).animate({ right: "-200" }, 800, 'easeInQuint'); 
}, 1000);

我正在我的网站上构建一个小 slider 。 slider 位置是 right: -200。它滑动到位置 right: 0 我想在点击页面上的其他任何地方后将其设置为动画回到位置 right: -200。

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

http://jsfiddle.net/aofg5v78/

Answer 1

将您的代码放入 JavaScript beautifier (最好对您发布的代码执行此操作以使其更易于理解)提供:

$(function () {
  $(".links")
    .click(function () {
        $('.slider')
          .stop(true, false)
          .animate({
            right: "0"
          }, 800, 'easeOutQuint');
      },
      function () {
        $(".slider")
          .stop(true, false)
          .animate({
            right: "-200"
          }, 800, 'easeInQuint');
      }, 1000);
});

您正在尝试将两个处理程序传递给 .click() 和一些看起来像超时或持续时间 (1000) 的东西。尝试这样的事情:

$(function () {
  var toggle;
  $(".links")
    .click(function () {
        toggle = !toggle;
        if (toggle) {
          $('.slider')
            .stop(true, false)
            .animate({
              right: "0"
            }, 800, 'easeOutQuint');
        }
        else {
          $(".slider")
            .stop(true, false)
            .animate({
              right: "-200"
            }, 800, 'easeInQuint');
        }
    });  

});

更新:要使其在您点击页面上的任意位置时滑动，稍微复杂一些:

$(function () {
  var toggle;
  $(document).click(function () {
    if (toggle) {
          toggle = !toggle;
          $(".slider")
            .stop(true, false)
            .animate({
              right: "-200"
            }, 800, 'easeInQuint');
    }
  });
  $(".links")
    .click(function (e) {
        e.stopPropagation();
        toggle = !toggle;
        if (toggle) {
          $('.slider')
            .stop(true, false)
            .animate({
              right: "0"
            }, 800, 'easeOutQuint');
        }
        else {
          $(".slider")
            .stop(true, false)
            .animate({
              right: "-200"
            }, 800, 'easeInQuint');
        }
    });  
  $(".slider")
    .click(function (e) {
      e.stopPropagation();
    });    
});

这部分:

  $(".slider")
    .click(function (e) {
      e.stopPropagation();
    });

当您点击 slider (而不是页面上的其他地方， slider 之外)时是否不隐藏 slider ，但如果那不是您想要的想要然后你可以删除它。

(可以重构代码以消除重复并避免多次运行选择器，但它服务于此示例的目的。此外，您现在不能在一个页面上拥有多个这样的 slider ，因为所有 slider 都会滑动同时，但我想没关系。)

参见 DEMO .

使用 toggle 的旧 jQuery 版本会更简单方法，但不幸的是它在 1.8 版中被弃用并在 1.9 版中删除。

(顺便说一句，默认情况下，您正在使用的缓动函数在普通 jQuery 中不可用。如果您使用的是 jQuery UI，则它们可用，但如果您不使用，则必须先添加它们才能使用他们。只是要记住一些事情，以避免无用的“未定义不是函数”异常。)