javascript - 将鼠标悬停在 上并根据值显示图像

Question

我目前正在将鼠标悬停在标签上时显示图片。我已经能够解决显示图片的主要问题。问题是当悬停快速发生时它会出现故障。有办法避免吗？另外，如何设置加载页面时显示的默认图像？ JSFIDDLE

HTML

<div id="links">    
    <a href="example.htm" class="large magenta awesome" data-content="cheeseburger">Cheeseburger »</a>
    <a href="example.htm" class="large blue awesome" data-content="tacos">Tacos »</a>
    <a href="example.htm" class="large red awesome" data-content="salads">Salads »</a>
    <a href="example.htm" class="large orange awesome" data-content="bread-sticks">Bread Sticks »</a>
    <a href="example.htm" class="large yellow awesome" data-content="dessert">Dessert »</a>
</div>

Jquery

$("div#links > a").hover(
    function(){
        var ID = $(this).data("content");
        $("div#images").children("img#" + ID).fadeIn("slow");
    },
    function() {
        var ID = $(this).data("content");
        $("div#images").children("img#" + ID).hide();
    }
);​

故障

Answer 1

The problem is that it has a glitch when hovering occurs quickly. Is there away to avoid that?

这不是故障。 fadeIn 正在使用动画。当您将鼠标悬停在链接上的速度快于动画完成时，您会遇到这种“故障”。

为确保您不会与之前正在运行的动画发生冲突，您必须停止任何当前和任何排队的动画。

替换

$("div#images").children("img#" + ID).fadeIn("slow");

与

$("div#images").children("img#" + ID).stop(true, true).fadeIn("slow");

DEMO - 在开始下一个之前清除动画队列

how can i set a default image to display when page is loaded?

我还添加了显示默认图像的代码。为了防止在使用默认图像时第一次将鼠标悬停在菜单项上时出现任何奇怪的视觉效果。该代码检查我们是否显示默认图像，如果是，它将进一步检查当前菜单的图像是否为默认图像。

如果是，它不会在显示时隐藏它，但如果不是，它会在淡入新图像之前先使用默认图像。

希望这是有道理的，请参阅下面的完整代码和 DEMO。

// Indicates if default image is shown
var showingDefaultImage = true;

var $images = $("div#images");
var $defaultImage = $images.children("img#tacos");

// Display a default image
$defaultImage.show();

$("div#links > a").hover(

function() {
    var ID = $(this).data("content");
    var $image = $images.children("img#" + ID);

    if (showingDefaultImage) {
        showingDefaultImage = false;
        if (!$image.is($defaultImage)) {
            $defaultImage.hide();
        }
    }

    $image.stop(true, true).fadeIn("slow");
}, function() {
    $images.children().hide();
});​

DEMO - 显示默认图像

上述 DEMO 中的代码也通过缓存选择器进行了一些优化。

would it be possible to leave up the most recent image from the last hovered tag ?(instead of hiding the image and leaving a blank)

如果我对您的理解正确的话，您不想在用鼠标离开菜单时隐藏图像，而是希望让您上次悬停在菜单上的图像可见。

为此，您删除了 hover 的第二个功能，因为不再需要它，您现在可以附加 mouseenter 事件。

var $images = $("div#images");
var $currentImage = $images.children("img#tacos");

$currentImage .show();

$("div#links > a").mouseenter(function() {
    var ID = $(this).data("content");
    var $image = $images.children("img#" + ID);

    if (!$image.is($currentImage)) {
        $currentImage.hide();
    }

    $currentImage = $image;
    $image.stop(true, true).fadeIn("slow");
});

DEMO - 在 mouseenter 上淡入图像并使最后一个图像可见

上述代码包括用于优化的选择器缓存以及确保当新的悬停菜单项与上一个悬停的菜单项相同时不会发生“闪烁”的逻辑。