如何添加淡入淡出效果這個jQuery圖片交換庫

我想知道我怎麼能徘徊在使用這個例子http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm 如何添加淡入淡出效果這個jQuery圖片交換庫

我在想，如果能夠實現這樣的www.bungie添加淡入效果。淨

下面是在例如

$(document).ready(function() { 
    // Image swap on hover 
    $("#gallery li img").hover(function(){ 
     $('#main-img').attr('src',$(this).attr('src').replace('thumb/', '')); 
    }); 
    // Image preload 
    var imgSwap = []; 
    $("#gallery li img").each(function(){ 
     imgUrl = this.src.replace('thumb/', ''); 
     imgSwap.push(imgUrl); 
    }); 
    $(imgSwap).preload(); 
}); 
$.fn.preload = function() { 
    this.each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
}

來源

2013-03-30 user2016307

這是一個快速解決方案（你將它添加到他們現有的代碼，不要編輯他們已經擁有）

$("#gallery li img").hover(function(){ 
    if ($("#main-img:animated").length){ 
     $("#main-img:animated").stop(); 
    } 
    $("#main-img").css("opacity", "0").animate({"opacity":"1"}, 300); 
});

來源

2013-03-30 03:19:54 bruchowski

使用在就是這個樣子在他們的例子中，這部分代碼的代碼

$("#gallery li img").hover(function(){ 
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', '')); 
});

更改爲

$("#gallery li img").hover(function(){ 
    $('#main-img').attr('src',$(this) 
        .fadeOut('fast')    
        .attr('src').replace('thumb/', '')); 
});

來源

2013-03-30 03:11:23

嘿謝謝你的幫助，但是當我懸停代碼提供的所有拇指開始消失。讓我看看我是否可以在jsFiddle中複製行爲 – user2016307

我用這偉大的工作bruchowski的代碼爲了我。我確實改變了，因爲當我將鼠標懸停在外時，我獲得了雙倍的淡入淡出效果，而我只是希望最後的圖片能夠被粘貼。

我對jquery也很新，並且首先將它粘貼在錯誤的地方。一旦我將它放在$（imgSwap）.preload（）;之前有效。

我放慢了淡入淡出的速度。

所以我的代碼如下：

<script type="text/JavaScript"> 
// prepare the form when the DOM is ready 
$(document).ready(function() { 
    $("#gallery li img").hover(function(){ 
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', '')); 
}); 
var imgSwap = []; 
$("#gallery li img").each(function(){ 
    imgUrl = this.src.replace('thumb/', ''); 
    imgSwap.push(imgUrl); 
}); 
$("#gallery li img").mouseover(function(){ 
if ($("#main-img:animated").length){ 
    $("#main-img:animated").stop(); 
} 
$("#main-img").css("opacity", "0").animate({"opacity":"1"}, 1400); 
}); $(imgSwap).preload(); 
}); 
$.fn.preload = function() { 
this.each(function(){ 
    $('<img/>')[0].src = this; 
}); 
} 
</script>

謝謝！

來源

2013-07-25 22:18:50 Kimley

如何添加淡入淡出效果這個jQuery圖片交換庫

回答

相關問題