我目前使用以下方法来淡化网站上的图像:
$(document).ready(function() {
$('ul.image-switch li').mouseover(function(e) {
if (e.target.nodeName.toLowerCase() == 'a') return;
var image_src = $('a', this).data('image');
var img = $('.image-container img');
if (img.attr('src') != image_src) { // only do the fade if other image is selected
img.fadeOut(200, function() { // fadeout current image
img.attr('src', image_src).fadeIn(200); // load and fadein new image
});
}
});
});
一个实际的例子是 http://www.sehkelly.com/#news .
如您所见,当前图像必须在新图像淡入之前淡出。
我希望 Action 能够同时进行。请问——有谁知道我怎样才能做到这一点?
非常感谢。
编辑:无知的新手。非常感谢代码示例。
最佳答案
在实际元素之上创建一个新的 img
元素,然后淡入此新图像。您需要一些 CSS 来将新图像放在旧图像之上。
仅用一个 img
元素是不可能做到这一点的。
if (img.attr('src') != image_src) { // only do the fade if other image is selected
img.after(
$('<img />').attr('src', image_src).fadeIn(200)
);
img.fadeOut(200);
}
您可能也想在开始淡入淡出之前等待新图像加载。 (查看 jQuery 文档以获取正确的函数,并在加载回调中淡入淡出图像)。
关于javascript - jQuery 同时淡入和淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13734915/