jquery thumbnail gallery - hover/fade

Question

我一直在努力得到這個答案... 我有一系列的縮略圖，當我翻轉他們時，我想主圖像（在一個單獨的div）更改爲滾動的縮略圖的內容。 我是新來編程，但是我很高興與基本功能我用下面的代碼獲得：

$(document).ready(function() { 
    var originalimg = $('.mainImage').attr('src'); 
    $(".subImage").hover(function() { 
     var currentimg = $(this).attr('src'); 
     $('.mainImage').attr('src', currentimg); 
    }, function() { 
     $('.mainImage').attr('src', originalimg); 
    }); 
});​ 

我會非常喜歡的是添加一些淡入/淡出效果。 我相信有一個更好的方法來實現這一點，但如果有人可以只是改變我的代碼以包括一些淡出，我會非常感激。謝謝大家！

Answer 1

這應防止任何閃爍或隊列建立：

var originalimg = $('.mainImage').attr('src'); 
$(".subImage").hover(function() { 
    var currentimg = $(this).attr('src'); 
    $('.mainImage').fadeOut(function() { 
     $('.mainImage').attr('src', currentimg).fadeIn(); 
    }); 
}, function() { 
    $('.mainImage').fadeOut(function() { 
     $('.mainImage').attr('src', originalimg).fadeIn(); 
    }) 
});​ 

jsFiddle example。

Answer 2

有了鏈接，使用​​和fadeIn()

var originalimg = $('.mainImage').attr('src'); 
$(".subImage").hover(function() { 
    var currentimg = $(this).attr('src'); 
    $('.mainImage') 
     .stop() 
     .fadeOut() 
     .attr('src', currentimg) 
     .fadeIn(); 
}, function() { 
    $('.mainImage') 
     .stop() 
     .fadeOut() 
     .attr('src', originalimg) 
     .fadeIn(); 
});​ 

demo