Question

我目前正在研究一些jQuery来动画我网站上的一些滑动面板。我的代码看起来不错，但我没有收到任何错误，但animate（）函数仍然无效。

以下是我取得的成就：

$(document).ready(function() {
  $(window).click(function(event) {
    if (event.target.matches('.ear')) {
      var parent = $(event.target).parent();
      if (parent.attr('data-toggled') == 'false') {
        var direction = parent.data('side');
        var distance = '0';
        parent.animate({direction: distance}, 500);
        parent.attr('data-toggled', true);
      } else {
        var direction = parent.data('side');
        var distance = '-20%';
        parent.animate({direction: distance}, 500);
        parent.attr('data-toggled', false);
      }
    };
  });
});

.ear是我要用作＆＃34;触发器＆＃34;的图像类。将我的窗格滑入和滑出。在.click()上触发.ear事件时，会读取其父级data-slide，以便了解将触发哪个窗格并指示.animate()应该将窗格滑向哪个方向。为了避免有太多的行和案例，我创建了一个direction变量，在其中我存储了我想要更改的css属性以及此更改的值。代码似乎完全运行（我尝试console.log() .animate()函数，这似乎有效，而data-toggled从true切换为false）但我的浏览器似乎没有执行if。

我一直试图修复但到目前为止没有任何作用。

编辑：

当我第一次点击左侧窗格时，动画功能应该与parent.animate({left: "0"},500);类似，因为我希望它能够滑入。

这是my website，因此您可以清楚地了解我想要实现的目标

Answer 1

您将字符串传递给animate()："{left: "-20%"}"。您可以通过在后面的行中的开发工具“源”面板中放置断点并检查该值来验证这一点。

相反，直接在animate()参数中构造一个实际对象：

var direction = parent.data('side');
var distance = '-20%';

parent.animate({
    direction: distance
}, 500);

我认为您同意这也更容易阅读。

Answer 2

jquery animate函数不接受这样的变量，因为它不需要参数上的引号。

考虑一下：

parent.animate({
    left: '100'
}, 500);

VS

var left = 'right';
parent.animate({
    left: '100'
}, 500);

第二个块周围的模糊性正是您无法使用变量的原因。而是使用这样的东西：

$(document).ready(function() { 
  $(window).click(function(event) {
    if (event.target.matches('.ear')) {
      var parent = $(event.target).parent();
      if (parent.attr('data-toggled') == 'false') {
        var direction = parent.data('side');
        var distance = '100';
        if (direction == 'left') {
            parent.animate({left: distance}, 500);
        } else if (direction == 'right') {
            parent.animate({right: distance}, 500);
        }
        parent.attr('data-toggled', true);
      } else {
        var direction = parent.data('side');
        var distance = '0';
        if (direction == 'left') {
            parent.animate({left: distance}, 500);
        } else if (direction == 'right') {
            parent.animate({right: distance}, 500);
        }
        parent.attr('data-toggled', false);
      }
    };
  });
});

JSfiddle link

当使用变量作为css参数时，jQuery .animate（）无效

2 个答案: