Question

我在向下滚动时尝试更改徽标，其想法是在两张图片之间切换。首先我尝试了这个解决方案：

  $(window).scroll(function(){
    if ($(this).scrollTop() > 200) {

        $('#logo').attr('src','/logo.png');
    } else {
        $('#logo').attr('src','/logo2.png');
    }
});

这是有效的，但是两个图像之间的桥梁很大，所以我认为fadeOut和fadeIn图像也许很好。然后我提出了这个想法：

$(window).scroll(function(){
    if ($(this).scrollTop() > 200) {

        $("#logo").fadeOut(1000, function() {
            $('#logo').attr('src','/logo.png');
        }).fadeIn(1000);


    } else {

        $("#logo").fadeOut(1000, function() {
            $('#logo').attr('src','/logo2.png');
        }).fadeIn(1000);
    };

});

这适用于50％，当我向下滚动图像fadeOut时，但新的进入像BAM一样，没有淡入淡出添加全部，当我向后滚动时，第一张图像将不再显示。 ..

有人可以帮我解决这个问题????

MVG，

Answer 1

试试这个简短的代码，

$(window).scroll(function(){
    var win=this;
    $("#logo").stop(true,true).fadeOut(1000, function() {
        this.src = $(win).scrollTop() > 200 ? '/logo.png' : '/logo2.png';
    }).fadeIn(1000);
});

更新了代码段，

var logo1='http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images.jpg',
logo2='http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images-2.jpg';
$(window).scroll(function(){
    $("#logo").fadeOut(1000, function() {
        $(this).attr('src',$(window).scrollTop() > 200 ? logo2 : logo1).fadeIn(1000)
    });
});

body{height:1000px}
img{width:150px;position:fixed;top:0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img id="logo" src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images.jpg" />

滚动时Jquery淡化效果并更改src

1 个答案: