0

我正在尝试使用 JS/JQuery 制作将淡出然后淡入不同数据（在本例中是图片）的图块，然后当您将鼠标移开时将其反转。现在我的代码在 Chrome 中运行良好，但是当我在 FireFox 中对其进行测试时，它会继续执行淡入/淡出命令。我查找了人们使用代码的类似情况，$(this).stop().fadeOut(function()但由于我正在执行多个淡入淡出并加载信息，因此无法正确执行动画。有谁知道解决这个问题？

 <script>
$(document).ready(function()
{
    var hov = false;
    $(".previewBox").mouseenter(function()
    {
        if(hov === false)
        {
            hov = true;
            $(this).fadeOut(function() 
            { 
                $(this).load(function() 
                { 
                    $(this).fadeIn(); 
                }); 
                $(this).attr("src", "Images/Portfolio/Art_Bike_Flip.png"); 
            });
        };
    });

    $(".previewBox").mouseleave(function()
    {
        if(hov === true)
        {
            hov = false;
            $(this).fadeOut(function()
            {
                $(this).load(function()
                {   
                    $(this).fadeIn();
                });
            $(this).attr("src", "Images/Portfolio/Art_Bike_Preview.png");
            }); 
        };
    });
});
</script>`enter code here`
4

1 回答 1

1

这里有几个问题。首先.load不是检测图像加载的可靠方法。某些浏览器在缓存图像时不会触发加载事件，因此脚本将失败。您需要使用类似waitForImagesor的插件imageLoaded。

https://github.com/alexanderdickson/waitForImages我推荐这个。

也.stop()可以很好地满足您的需求，如果它似乎在某些情况下取消了淡入淡出，请尝试.stop(true, true)，它应该可以很好地制作动画，即使加载数据和多个淡入淡出也是如此。您可能需要对其进行调整，以便仅将停止命令放置在最后一个渐变发生时。

当你只需要一个时，你也在制作大量的 jQuery 对象。将其限制为一个对象将使您的脚本更加高效。

var previewBox = $('.previewBox');

然后你可以在任何地方使用那个：

previewBox.mouseenter(function()
{
   if(hov === false)
   {
      hov = true;
      previewBox.stop().fadeOut(function(){
           previewBox.imagesLoaded(function...

在您使用一个类的多个实例的情况下，您需要将您的事件彼此隔离。你可以这样做.each

$('.previewBox').each(function(){
     var previewBox = $(this);
     previewBox.mouseenter(function(){ ....

通过将所有当前逻辑包装在 a 中，.each您将避免元素之间的事件交互。通过这种方式，事件mouseenter mouseleave和附加的逻辑将隔离绑定到具有该类的元素的每个实例，而不是绑定到该类的所有元素。

于 2012-04-17T03:52:38.343 回答