如何动态检索事件的持续时间？ （如鼠标输入）

Question

我用 jQuery 用 mouseenter/mouseleave 和 animate() 方法在一堆 div 上制作了一个动画，像纸牌一样组织起来。

当我将鼠标悬停在一个 div 上时，它向上移动了 20 像素。 到目前为止一切顺利。 但我的动画速度是线性的 (50)。

我想做的是我的动画持续时间等于悬停事件的持续时间。

这是我的html：

<section>
 <div id="one"></div><!--
 --><div id="two"></div><!--
 --><div id="three"></div><!--
 --><div id="four"></div><!--
 --><div id="five"></div><!--
 --><div id="six"></div>
</section>

CSS：

html, body{
    margin:0;
    padding:0;
}
section{
  position:relative;
  margin:0 auto;
  width:400px; 
  height:400px; 
}
div{
    position:absolute;
    display:inline-block;
    width:200px;
    height:200px;
    top:150px;
    background:black;
    border:1px solid grey;
}
#one{
    z-index:50;
    left:0px;
}
#two{
    z-index:49;
    left:40px;
}
#three{
    z-index:47;
    left:80px;
}
#four{
    z-index:46;
    left:120px;
}
#five{
    z-index:45;
    left:160px;
}
#six{
    z-index:44;
    left:200px;
}

和 jQuery ：

 $(document).ready(function(){
      $('div').on({
          mouseenter: function(){
              $(this).animate({
                  'top':'-=20px',
              },50); 
          },
          mouseleave:function(){
              $(this).animate({
                  'top':'+=20px',
              },50);
          }    
      });
  });

还有小提琴http://jsfiddle.net/Tender88/5FKUN/2/

我想我必须用动态包含 mouseenter 事件持续时间的变量替换当前速度，但我不知道如何检索该数据:(

非常感谢任何帮助。谢谢:)

Answer 1

试试

$(document).ready(function () {
    var _steps = {
        "mouseenter": [],
        "mouseleave": [],
        "estimate": [],
        "now": []
    };
    $('div').on({
        mouseenter: function (e) {
            _steps.mouseenter.push(e.timeStamp);
            $(this)
                .animate({
                'top': '-=20px',
            }, {
                duration: 50,
                start: function () {
                    console.log(_steps, _steps.estimate, _steps.now)
                },
                step: function () {
                    _steps.now[0] = $.now();
                }

            })
        },
        mouseleave: function (e) {

            $(this)
                .animate({
                'top': '+=20px',
            }, {
                duration: 50,
                step: function () {
                    _steps.now[0] = $.now();
                },
                complete: function () {
                    // see `_steps` object at console
                    console.log(_steps, _steps.estimate, _steps.now)
                }
            });
            _steps.mouseleave.push(e.timeStamp);
            _steps.estimate[0] = (_steps.mouseleave.slice(-1) - _steps.mouseenter.slice(-1));
        }
    });
});

jsfiddle http://jsfiddle.net/guest271314/P5xLh/

Answer 2

回答您的问题标题：

jsBin live demo

$(function() { // DOM ready shorthand

    var startTime;

    $('div').on({
        mouseenter: function() {
          startTime = new Date().getTime(); 
        },
        mouseleave:function() {
          alert("EVENT DURATION: "+ (new Date().getTime()-startTime) +"ms");
        }
    }); 

});

一旦您mouseleave，以上内容将为您提供悬停持续时间。

---

如果您想实时获取当前mouseenter 的持续时间，则应使用间隔：

jsBin demo

$(function() { // DOM ready shorthand

    var duration=0,
            itv,
            ms = 10; //  milliseconds Tick interval

    $('div').on({
        mouseenter: function() {
            var el = this;
            itv = setInterval(function(){
                duration += ms;
                $(el).text( duration  );
            }, ms);
        },
        mouseleave:function() {
            clearInterval( itv );
        }
    });

});

---

比我的建议：jsBin demo

$('div').hover(function(e) {
    $(this).stop().animate({top: e.type=="mouseenter"?100:150}, 700);
});

---

现在让我们快速回到您的问题和代码

您想用当前代码实现的目标：

• 以 50 毫秒的速度将元素向上/向下移动 20 像素 - 反复 - 只要鼠标悬停在它上面

ISSUE 1：一旦移动元素离开鼠标，注册事件将是˙mouseleave˙。
ISSUE 2：上述原因你是强制用户用光标跟随元素 :)
ISSUE 3：元素应该停在哪里？ ... 它是 top -=20 无限的，对吗？
ISSUE 4：您没有为您的 .animate() 使用 'linear' 参数，这意味着它使用默认的 ease，导致每+=或-= 20px 发生一次非线性运动。
问题 5：您期望 mouseleave 做一些事情，只要......：？太晚了。
ISSUE 6：Hover-Time 和 Animation-Duration 是两个完全不同的东西。想想看。如果悬停时间最初为0，则需要精确的0 才能动画到所需的最终位置。砰！