• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

jquery 来源:LazerSharks 9次浏览

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

如何在下面停止回拨动画,一旦点击了#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 

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)