0

この例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;
    });
}
4

3 に答える 3

1

私は私にとってうまくいったブルチョフスキーのコードを使用しました。.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>

ありがとう！！！

于 2013-07-25T22:18:50.243 に答える
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/', ''));
});
于 2013-03-30T03:11:23.053 に答える