javascript - 平滑有问题的 javascript 动画(逻辑问题)

Question

抱歉标题有点误导。我真的不知道如何表达我的问题。

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

您可以在这里自己查看问题:http://theromdepot.com/

现在要更正此问题，我尝试检查在离开图标时是否有任何一个图像当前悬停，如果没有，请继续并将一切恢复正常。如果它们中的任何一个当前悬停，则只更改文本并且不要淡化任何内容。出于某种原因，无论我做什么我都无法让它工作并废弃了整个东西。如果有人能提出解决方案，我将不胜感激。

这是相关的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() 调用，您未包含在此处，但存在于您的 pastebin 中。

$(".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);
});