Javascript 悬停在<；a>；以及基于值显示图像

当标签悬停在上方时，我当前正在显示图片。我已经能够解决显示图片的主要问题。问题是，当悬停快速发生时，它有一个小故障。有没有办法避免这种情况？另外，如何设置加载页面时显示的默认图像

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>

小故障

---

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

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

---

该故障可能是因为图像尚未加载而发生的，您应该查找一些预加载技术。但是，在显示相关图像之前，您必须始终等待相关图像被加载

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

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

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

$("#id-of-element").attr('id','preloaded-bg-div');

问题是，当悬停快速发生时，它有一个小故障。是 有没有办法避免这种情况

这不是一个小故障<代码>fadeIn正在使用动画。当你在链接上悬停的速度比动画完成的速度快时，你就会体验到这个“小故障”

为确保与先前运行的动画不冲突，必须停止任何当前动画和任何排队的动画

替换

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

与

-在启动下一个动画队列之前清除动画队列 如何设置加载页面时显示的默认图像

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

如果是，它不会隐藏它，因为它正在显示它，但如果不是，它将在淡入新图像之前隐藏默认图像

希望这是有意义的，请参阅下面的完整代码和演示

// 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();
});​

-显示默认图像 通过缓存选择器，上述演示中的代码也得到了一些优化

---

是否可以保留上一张照片中的最新图像 悬停标记？（而不是隐藏图像并留下空白）

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

为此，请删除

悬停

的第二个功能，由于不再需要该功能，现在可以附加

鼠标指针

事件

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

-鼠标上的图像淡入淡出，最后一个图像可见 上述代码包括用于优化的选择器缓存，以及确保新悬停菜单项与上次悬停菜单项相同时不会出现“闪烁”的逻辑。

请参阅

正如弗朗索瓦·瓦尔所说，使用

stop

停止动画。但是，我认为您可以使用索引，而不是使用

数据内容
和ID：

HTML:

这在很大程度上依赖于图像的顺序来匹配链接的顺序。这将使替换、添加、删除图像和锚定变得更加困难，因为订单始终必须匹配。这也增加了更新后图像混淆的风险。@FrançoisWahl我认为即使在更新时，保持正确的顺序也不难。但如果是针对询问者的，那么您的评论就是警告。@j08691:不确定它是否重复，最后一个问题是如何首先显示图像。最后一个问题的答案是OP是如何使用
悬停
和
数据属性
实现它的。然而，这个问题涉及建议实施中的问题。当前的
悬停
实现存在图像未按预期隐藏的问题。这是两个不同的问题，解决了两个不同的问题。@FrancoisWahl说得很好。是否可以保留上次悬停的
标记中的最新图像？（而不是隐藏图像并留下空白）@charlectodex23：我编辑了我的答案，以根据您的评论来回答这个问题。让我知道这是否对你有用，或者如果我不理解你的评论。
// 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();
});​

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

<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>

$("div#links > a").hover(
    function(){
        $("#images>img")
            .hide()
            .stop(true,true)
            .eq($(this).index()).fadeIn("slow");
    },
    function() {
        $("#images>img").hide();
    }
);