冻结动画/阻止回放动画悬停弹出

我知道有一些类似的问题，但我正在尝试他们的解决方案，它不适合我。冻结动画/阻止回放动画悬停弹出

如何在下面停止回拨动画，一旦点击了#hitbox？在动画中，当#hitbox悬停在div上将向外移动，并且当鼠标离开#hitbox时，div将移回原始位置。我想的div留在自己的外侧的位置#hitbox被点击，而不是移动回来后，。

var timeOut; 
$('#hitbox').hover(
      function() { 
       clearTimeout(timeOut); 

    // **some animation functions moving divs outward** e.g.: 
    $('#div').stop().animate(
    { 
    'margin-left': '-500px', 
    }, 1000, 'easeOutQuart' 
    ); 

        } // End first function 

    , 

      function() { 
       timeOut=setTimeout(function(){ 

    // **some animation functions moving divs back in** e.g.: 
    $('#div').animate(
    { 
    'margin-left':'0px', 
    }, 900, 'easeOutExpo' ); 

       }, 600); //end setTimeout 

      } //end second callback function 
); //end hover 

$('#hitbox').click(function() { 
    $('#hitbox').css(
      {'display': 'none', 
      }); 

clearTimeout(timeOut); // *****NOT WORKING***** 


}); // end click

一旦#hitbox被点击，div一定向上移动，但它们会收缩（回迁向内），当我希望他们留在他们的外部位置。

clearTimeout(timeOut); 不像其他一些问题中建议的那样工作。我有一种感觉，我需要比这更多的东西？正如你在代码中看到的那样，我也尝试立即将#hitbox的显示设置为none。感谢您的帮助！

来源

2012-12-19 LazerSharks

你可以一个clicked类添加到#hitbox，它可以用来检查mouseleave处理程序的内容应该被执行：

$('#hitbox').click(function() { 
    $(this).css({ 
     'display': 'none', 
    }); 
    $(this).addClass('clicked'); 
});

您的hover方法第二处理程序是这样的：

function() { 

    if($(this).is(":not(.clicked)")){ 
     timeOut=setTimeout(function(){ // setTimeout method retained instead of using delay() 
     // **some animation functions moving divs back in** e.g.: 
     $('#div')/*.delay(600)*/.animate({ // delay removed due to issues w/ animation queue buildup 
      'margin-left': '0px', 
     }, 900, 'easeOutExpo'); 

     }, 600); //end setTimeout 
    } // end if() 

} // end hover

来源

2012-12-19 23:55:08

在我的悬停方法的第二处理程序，我会在哪里放置“timeOut = setTimeout（function（）{”？ – LazerSharks

@ShaltNot你应该完全放弃超时，因为你并不需要它。如果你想延迟这个动作，只需在你的方法链上添加'.delay（600）'。我已经添加了这个答案。 –

啊。我也只是尝试在if（）函数之前添加timeOut，并且它工作正常！我也会测试延迟（）。谢谢！！这个问题以前没有收到答案。 – LazerSharks

虽然我喜欢@阿萨德的答案，它看起来当你点击它像#hitbox消失了，所以也许你真的只是想解除绑定悬停（mouseleave）事件？与此

clearTimeout(timeOut); // *****NOT WORKING*****

：如果是这样，只需更换这

$('#hitbox').unbind('mouseleave');

编辑：

Here's a jsFiddle.

（为了使这个快速和肮脏的演示工作，我添加正方形，在ready处理程序中添加您的代码，删除easeOut参数，并更改动画的方向。）

来源

2012-12-20 00:04:45

我想到了这一点，但它很昂贵，因为不是只需添加/删除一个类，就需要注销/注册事件处理程序。 –

这也工作！我没有足够的经验来说这是否是一种更好的方法，但谢谢！巧妙利用显示技巧：无... – LazerSharks

@Asad - 我明白了。（我对内部并不熟悉，所以我接受你的说法。）另一个说法是，如果我们想在某个时候恢复'＃hitbox'，我们必须重新注册事件，所以你的答案显然会更胜一筹。 –

冻结动画/阻止回放动画悬停弹出

回答

相关问题