3

当标签悬停时，我目前正在显示图片。我已经能够解决显示图片的主要问题。问题是当快速悬停时它会出现故障。有没有办法避免这种情况？另外，如何设置加载页面时显示的默认图像？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();
    }
);​

毛刺

在此处输入图像描述

4

4 回答 4

3

问题是当快速悬停时它会出现故障。有没有办法避免这种情况？

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

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

代替

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

和

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

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

如何设置加载页面时显示的默认图像？

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

如果是，它不会隐藏它，因为它无论如何都会显示它，但如果不是，它会在淡入新图像之前隐藏默认图像。

希望这是有道理的，请参阅下面的完整代码和 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 中的代码也通过缓存选择器进行了一些优化。

是否可以留下最后一个悬停标签中的最新图像？（而不是隐藏图像并留空）

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

为此，您删除了的第二个功能，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");
});

演示- 在 mouseenter 上淡入图像并使最后一张图像可见

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

于 2012-09-23T01:39:05.053 回答
1

见http://jsfiddle.net/7Wp9z/7/

正如 François Wahl 所说，用于stop停止动画。data-content但我认为您可以使用索引，而不是使用和 ID：

HTML：

<div id="links">    
    <a href="example.htm" class="large magenta awesome">Cheeseburger »</a>
    <a href="example.htm" class="large blue awesome">Tacos »</a>
    <a href="example.htm" class="large red awesome">Salads »</a>
    <a href="example.htm" class="large orange awesome">Bread Sticks »</a>
    <a href="example.htm" class="large yellow awesome">Dessert »</a>
</div>

<div id="images">
    <img src="http://media.smashingmagazine.com/wp-content/uploads/images/brand-ux/cb.jpg">
    <img src="http://adventuresoflittlemiss.files.wordpress.com/2012/07/tacos.jpg">
    <img src="http://www.growingappetite.com/wp-content/uploads/2011/05/chicken-salad1.jpg">
    <img src="http://afflictor.com/wp-content/uploads/2010/10/breadsticks1.jpg">
    <img src="http://1.bp.blogspot.com/-IaURSrV70LI/T4YzPubl9EI/AAAAAAAAGSg/AEdd-eLuJUk/s1600/Cooking+Weekly.jpg">
</div>

JavaScript：

$("div#links > a").hover(
    function(){
        $("#images>img")
            .hide()
            .stop(true,true)
            .eq($(this).index()).fadeIn("slow");
    },
    function() {
        $("#images>img").hide();
    }
);
于 2012-09-23T01:43:43.000 回答
0

您是否尝试过不指定哪些孩子应该隐藏在鼠标移出部分？

$("div#links > a").hover(
    function(){
        var ID = $(this).data("content");
        $("div#images").children("img#" + ID).fadeIn("slow");
    },
    function() {
        $("div#images").children().hide();
    }
);​
于 2012-09-23T01:34:07.667 回答
0

故障可能是因为图像尚未加载，您应该查找一些预加载技术。您将始终必须等待相关图像被加载，然后才能显示它们。

但是您可以通过指示图像正在加载或在图像加载之前不激活悬停效果来增强用户体验。

我可能会选择最后一个案例，因为我很懒，但这只是我。

一种简单的预加载技术是声明多个具有不同背景图像的 id，然后使用 javascript 动态更改 id 并显示图像。

$("#id-of-element").attr('id','preloaded-bg-div');
于 2012-09-23T01:34:37.883 回答