Question

我使用带有mouseenter / mouseleave的jQuery创建了一个动画，并且在一堆div上使用animate（）方法组织起来像一副扑克牌。

当我在div上盘旋时，它向上移动了20px。到目前为止一切顺利。但我动画的速度是线性的（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

回答您的问题标题：

<强> 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后为您提供悬停时长。

如果您想 live ，则应使用当前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);
});

<小时/> 现在让我们快速回顾您的问题和代码

您希望使用当前代码实现的目标：

以50ms的速度向上/向下动画20px元素 - 重复 - 只要鼠标悬停

问题1 ：一旦移动元素离开鼠标，注册事件将为˙mouseleave˙。
问题2 ：上面提到的原因是你强迫用户用光标跟随元素:) 问题3 ：元素应该停在哪里？ ...... top -=20无限，对吧？ 问题4 ：您的'linear'不使用.animate()参数，这意味着它使用默认ease，导致每个{非线性移动} {1}}或+= 20px。
第5期：你期待-=做一些事情，只要....：？太晚了 问题6 ：悬停时间和动画持续时间是完全不同的两件事。想一想。如果悬停时间最初为mouseleave，则需要精确0来设置所需的最终位置。 BAM！

Answer 2

尝试

$(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/

如何动态检索事件的持续时间？（像mouseenter）

2 个答案:

如何动态检索事件的持续时间？ （像mouseenter）

2 个答案:

如何动态检索事件的持续时间？（像mouseenter）