獲取縮略圖交換以淡入淡出

Question

我只是將自己投入到javascript，jQuery池中，並找到了一些可能的替代解決方案，但我想看看是否有一種方法可以使我使用正在使用的現有javascript達到fadeIn / fadeOut。

現在是縮略圖，它使用以下腳本在onclick（實際站點是onmouseover）的主要區域中切換圖像：

    function switch_product_img(divName, totalImgs) {
        for (var i=1; i<=totalImgs; i++) {
            var showDivName = 'photo_' + i;
            var showObj = document.getElementById(showDivName);
            if (showDivName == divName)
                showObj.style.display = 'block';
            else
                showObj.style.display = 'none';             
            }
        }
    </script>

您可以在此處看到基本測試： http : //www.souldesigngroup.com/client/miguel/editorial/

我嘗試了多種不同的方法來實現它，並給出了一些建議，但到目前為止，這些建議都沒有任何表現形式。 因此，任何想法，建議和解決方案都將不勝感激。

我知道還有其他選擇，我可能會選擇其中之一進行重建，但這已經設置好並且除了淡入淡出之外還可以正常工作。

預先感謝您的任何幫助！ -soren

Answer 1

如果您願意使用jQuery並對HTML進行一些修改，那么我為您提供了一個解決方案。

的HTML

<div class="photo" id="photo_1">...</div>
<div class="photo" id="photo_2">...</div>
<div class="photo" id="photo_3">...</div>

<ul class="thumbs">
    <li><a href="#" rel="photo_1"><img src="..." /></a></li>
    <li><a href="#" rel="photo_2"><img src="..." /></a></li>
    <li><a href="#" rel="photo_3"><img src="..." /></a></li>
</ul>

jQuery的

$(function() {
    $('ul.thumbs a').click(function() {
        var rel = $(this).attr('rel');
        $('div.photo').fadeOut(500, function() {
            $('div#'+rel).fadeIn(500);
        });
        return false;
    });
});