jquery - 安 bool 的事件

Question

我在 Ember 部分模板的链接上有一个 fadeTo 动画；该动画在鼠标单击链接时激活，其完成方式如下:

jQuery('#object').fadeTo(1000, 1);

所以需要1秒才能完成；问题是，如果我在动画完成之前将鼠标移到部分模板区域之外，那么它就会停止；例如，如果我单击链接，动画开始并且对象开始淡入，但是如果我在 1 秒过去之前将鼠标移出部分模板区域，则对象将不会完全可见，但其不透明度将保持不变小于 1；

执行fadeTo代码的函数在实际 View 的didInsertedElement内调用...有人知道如何才能让动画一旦开始就会完成，即使用户将鼠标移到部分模板区域之外？

Answer 1

有几件事:

1. 点击链接会出现 404 错误，如果没有更多代码，就很难获取上下文

2. 您是否正确使用 Ember 事件处理？您提到 fadeTo 代码位于 didInsertElement 函数中，在处理点击事件时听起来不太正确。 didInsertElement 是在渲染(或重新渲染)元素后调用的回调。

根据描述，听起来您有两个选择。这两种方法都不应该依赖于光标位置。

选项 1

如果您的模板足够简单，可以绑定(bind)到 View 中的点击事件，那就使用它。这样，您就不必指定任何选择器(例如 #object)。

在您的模板中您应该只有一个标准链接:

    <a href="#"> link text </a>
    

现在，处理您 View 中的事件

    App.FooView = Ember.View.extend({

      click: function(e) {
        $(e.target).fadeTo(1000, 1);
        return false;  // prevent page transition
      }

    });

选项 2

直接绑定(bind)到链接，并在 Controller 中处理事件。

在模板中，向链接添加操作:

    <a href="#" id="object" {{action "fade"}}> link text </a>

现在，使用元素 ID 在 Controller 中处理事件:

    App.FooController = Ember.ObjectController.extend({

      actions: {
        fade: function() {
          $('#object').fadeTo(1000, 1);
        }
      }

   });

如果我在这里偏离基地，请为我们提供一些代码。谢谢。