Question

我正在尝试使用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`

Answer 1

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

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

同样.stop()可以满足您的需求，如果它在某些情况下似乎取消了淡入淡出，请尝试.stop(true, true)，即使加载数据和多个淡入淡出，它也应该很好。您可能需要对其进行调整，以便仅将stop命令放在最后一次淡入淡出处。

当你只需要一个jQuery对象时，你也会制作大量的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(){ ....

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

在Firefox中使用Javascript / JQuery Mouseover淡出（不断重复）

1 个答案: