0

我创建了一个简单的 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')），但没有运气.. . 对实现这一目标的最有效方法有什么建议吗？

4

1 回答 1

1

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

您应该使用类似的东西.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); 
    }); 
});
于 2012-08-05T09:27:59.597 回答