Question

我在div中使用 #box id创建了一个javascript 动画对象，但我的问题是我无法引用该函数外的动画对象。

http://codepen.io/vincentccw/pen/bfojB?editors=101

这是我的代码：

$('#box').each(function(index, element)
{
          var kkc = new TimelineLite({
            paused:true
          });

          kkc.to($("#box") , .4, {left:100,ease:Power1.easeInOut});

          element.animation = kkc; 

});

$('#box').on('mouseenter', function(){
    $('#box').animation.play(); //this doesn't work
});

Answer 1

在您的示例中，您将jQuery对象与DOM对象混合使用，并且您在一个地方和另一个地方使用其他地方，因为它们不相同，您的代码无法正常工作。

当你这样做时：

element.animation = kkc;

您正在向DOM对象添加名为animation的自定义属性。

当你尝试这样做时：

$('#box').animation.play();

您正在尝试访问不存在的jQuery对象上的自定义属性animation。

如果您想坚持使用自定义DOM属性，可以使用以下代码：

$('#box').on('mouseenter', function(){
    this.animation.play(); 
});

因为事件处理程序中的this是DOM对象。

执行此操作的jQuery方法越多（避免将自己的自定义属性添加到DOM对象）就像这样：

$('.box').each(function(index, element)
{
          var kkc = new TimelineLite({
            paused:true
          });

          kkc.to($(this) , .4, {left:100,ease:Power1.easeInOut});

          $(element).data("animation", kcc); 

});



$('.box').on('mouseenter', function(){
    $(this).data("animation").play();
});

此外，我可能会问您为什么要使用$('#box').each()，因为只应该有一个与#box选择器匹配的对象，因此您不需要使用.each()迭代。

Answer 2

您可以使用.data()将动画附加到元素。例如：

var kkc = new TimelineLite({...});
// ...
$('#box').data("animation", kkc);


$('#box').on('mouseenter', function(){
    $('#box').data("animation").play();
});

NB。您在示例中使用了$('#box').each(...)，这意味着您希望DOM中有多个ID为box的元素。通常，ID在DOM中应该是唯一的，因此我在此处删除了示例代码中不必要的each使用。

如何触发/引用自定义JavaScript对象？

2 个答案: