Question

对于略带误导性的标题感到抱歉。我真的不知道如何解释我的问题。

我正在一个网站上工作，我在滚动这两个图标时遇到了动画之间转换的问题。当您将鼠标悬停在任一图标上时，动画运行得很好，但当您将其移动到下一个图标上时，您可以看到它淡出并立即淡入。它看起来很糟糕。

现在为了纠正这个问题，我尝试检查当前离开图标时是否有任何图像悬停，如果没有，请继续并将所有内容恢复正常。如果它们中的任何一个当前悬停，那么只改变文本而不褪色。出于某种原因，无论我做了什么都无法让它工作，并且废弃了整个事情。如果有人能提出解决方案，我将非常感激。

这是相关的javascript：

$(document).ready(function(){

    $("#cartridge").hover(function(){
        document.getElementById("archivetext").innerHTML = "View The Archive";  
        $("#archivetext").animate({opacity: 1}, 400);
        $("#slogan").animate({opacity: 0}, 300);
        $("#recent").animate({opacity: 0}, 400);
        $("#cartridge").animate({opacity: 1}, 200);
    }, function(){
        $("#cartridge").animate({opacity: .9}, 200);
        $("#archivetext").animate({opacity: 0}, 400);
        $("#slogan").animate({opacity: 1}, 300);
        $("#recent").animate({opacity: 1}, 400);
    });

    $("#manual").hover(function(){
        document.getElementById("archivetext").innerHTML = "View The Manuals";
        $("#archivetext").animate({opacity: 1}, 400);
        $("#slogan").animate({opacity: 0}, 300);
        $("#recent").animate({opacity: 0}, 400);
        $("#manual").animate({opacity: 1}, 200);
    }, function(){
        $("#manual").animate({opacity: .9}, 200);
        $("#archivetext").animate({opacity: 0}, 400);
        $("#slogan").animate({opacity: 1}, 300);
        $("#recent").animate({opacity: 1}, 400);

    });
});

以防万一，这里是整个源代码的链接：http://pastebin.com/di5kcZ6N

Answer 1

您需要使用jQuery的.stop()功能。您必须在每次.animate()来电之前调用它，如下所示：

$("#archivetext").stop().animate({opacity: 1}, 400);

同样适用于您在此处未包含的.animate()来电，但您的来宾中也存在。

$(".Cartridge").mouseover(function(){
    $(this).stop().animate({height: "+=20", width: "+=20"}, 200);
});
$(".Cartridge").mouseout(function(){
    $(this).stop().animate({height: "-=20", width: "-=20"}, 200);
});

顺便说一下，如果你使用.animate()的增量/减量，你可能会在快速进出鼠标时产生奇怪的副作用，所以如果你使用绝对值，它会是最好的，例如：

$(".Cartridge").mouseover(function(){
    $(this).stop().animate({height: 300, width: 300}, 200);
});
$(".Cartridge").mouseout(function(){
    $(this).stop().animate({height: 280, width: 280}, 200);
});

虽然您正在使用它，但请将其合并到您发布的脚本部分，这样您就可以在一个地方拥有所有动画行为：

$("#cartridge").hover(function(){
    document.getElementById("archivetext").innerHTML = "View The Archive";  
    $("#archivetext").stop().animate({opacity: 1}, 400);
    $("#slogan").stop().animate({opacity: 0}, 300);
    $("#recent").stop().animate({opacity: 0}, 400);
    $("#cartridge").stop().animate({opacity: 1, height: 300, width: 300}, 200);
}, function(){
    $("#cartridge").stop().animate({opacity: .9, height: 280, width: 280}, 200);
    $("#archivetext").stop().animate({opacity: 0}, 400);
    $("#slogan").stop().animate({opacity: 1}, 300);
    $("#recent").stop().animate({opacity: 1}, 400);
});

平滑毛躁的javascript动画（逻辑问题）

1 个答案: