使用jQuery顯示不同的圖像基於項目徘徊

Question

我試圖完成兩兩件事：

左路軍：步驟默認情況下褪色，但各個步驟淡入懸停顏色齊全。

右欄：根據左欄中懸停的步驟顯示不同的圖像。默認情況下，應顯示第一個圖像。

我正在使用fadeIn函數，但我不能讓它按我希望的方式工作。什麼是最好的方式去做這件事？

Jsfiddle Example

$(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」事件中：

（也許你需要穿上絕對位置的圖像，以避免閃爍）

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