如何为此jQuery图像交换图库添加淡入淡出效果

时间:2013-03-30 03:03:32

标签: javascript jquery

我想知道如何在使用此示例悬停时添加淡入淡出效果http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm

我想知道是否有可能实现像这样的东西www.bungie.net

以下是示例中使用的代码

$(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;
    });
}

3 个答案:

答案 0 :(得分:1)

我使用了bruchowski的代码,这对我很有用。我确实将.hover更改为.mouseover,因为当我出去时我得到了双倍的淡入淡出效果,而我只想让最后一张图像粘在上面。

我对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>

感谢!!!

答案 1 :(得分:0)

在这部分代码中,这个代码在他们的例子中

   $("#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/', ''));
});

答案 2 :(得分:0)

这是一个快速解决方案(您可以将其添加到现有代码中,不要编辑它们已有的代码)

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