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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

如何在下面停止回拨动画，一旦点击了#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。 感谢您的帮助！

回答：

你可以一个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

回答：

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

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

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

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

编辑：

Here's a jsFiddle.

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

以上是 冻结动画/阻止回放动画悬停弹出 的全部内容， 来源链接： utcz.com/qa/261027.html

回到顶部