Question

我创建了一个简单的Jquery图像转换查看器，每次加载新照片时，窗口会自动向上滚动到刚刚加载的新图像的顶部。我试图阻止这种情况，以便转换不会中断用户在页面上的任何位置。

到目前为止，这是我的代码：

$(document).ready(function() {

var slideShow = function()
{
current_img = $("#current_img"); // <img> element with src to be changed
height_width = 'width="100%" height="100%"';
photos = new Array('images/home_s1.png','images/home_s2.png', 'images/home_s3.png');
setTimeout(function() { current_img.fadeOut('fast', function() { current_img.attr('src', photos[0]); current_img.fadeIn('slow'); }); }, 0);
setTimeout(function() { current_img.fadeOut('fast', function() { current_img.attr('src', photos[1]); current_img.fadeIn('slow'); }); }, 5000);
setTimeout(function() { current_img.fadeOut('fast', function() { current_img.attr('src', photos[2]); current_img.fadeIn('slow'); }); }, 10000);
setTimeout(function() { slideShow(); }, 15000);
}

$("img").ready(slideShow);

});

我尝试了多种不同的方法来操作preventDefault（）函数，我也尝试了加载图像的不同变体（即加载到html（）而不是img.attr（'src'）），但没有运气......有关实现这一目标的最有效方法的任何建议吗？

Answer 1

您似乎遇到的问题是.fadeIn()和.fadeOut()的默认实现将display属性设置为none。这将使元素具有0高度和宽度，这将导致一种跳跃效果。

您应该使用类似.fadeTo()的内容，并且在切换图像时不要将不透明度一直降低到0。 0.01之类的值也足够了，并且不会使jQuery将display属性更改为none。

以下是您在setTimeout回调中需要执行的操作的示例：

setTimeout( function() { 
    current_img.fadeTo( 'fast', 0.01, function() { 
        current_img.attr('src', photos[0]); 
        current_img.fadeTo('slow', 1); 
    }); 
});

Jquery禁用自动窗口滚动

1 个答案: