Question

我试图完成两件事：

左栏：默认情况下，步骤会褪色，但单个步骤会在悬停时淡入全彩色。

右列：根据左列中悬停的步骤显示不同的图像。默认情况下，应显示第一张图像。

我正在使用fadeIn功能，但我不能按照我希望的方式工作。这是最好的方法吗？

$(document).ready(function() {


$('#step-one')
.hover(
    function() {
        $('#step-one-image-holder').fadeIn('slow');
    }, function() {
        $('#step-one-image-holder').fadeOut('fast');
    }
);

$('#step-two')
.hover(
    function() {
        $('#step-two-image-holder').fadeIn('slow');
    }, function() {
        $('#step-two-image-holder').fadeOut('fast');
    }
);

$('#step-three')
.hover(
    function() {
        $('#step-three-image-holder').fadeIn('slow');
    }, function() {
        $('#step-three-image-holder').fadeOut('fast');
    }
);

}）;

Answer 1

如果使用“悬停”，当您离开左栏时，图像将永远消失（我不确定您是否需要）。您可以在“mouseenter”事件中使用“fadeIn”和“fadeOut”：

（也许您需要将图像放在绝对位置以避免闪烁）

//---Show images on mouseenter
$("div[id^='step-']").on("mouseenter", function(){

    var image = $("img[id='" + $(this).attr("id") + "-image-holder']");

    $("img[id^='step-']").not(image).fadeOut();

    image.fadeIn();    

});

//---Hide images by default
$("img[id^='step-']:gt(0)").hide();

jsfiddle

使用JQuery显示不同的基于图像的项目

1 个答案: