[英]Jquery: FadeIn on image src swap
I have a piece of JQuery script that changes the src of an image on click: 我有一个JQuery脚本,可以在点击时更改图像的src:
var imgsrc;
$('#thumbs img').click(function(){
imgsrc = $(this).attr('src');
$('#mainphoto img').attr('src', imgsrc);
I am wondering if theres a way to add .fadeIn() to this at all? 我想知道是否有办法将.fadeIn()添加到此处?
I have tried: 我努力了:
$('#mainphoto img').fadeIn().attr('src', imgsrc);
But this does not work. 但这不起作用。
Can anyone suggest a way to adjust the symantecs to accomodate this? 任何人都可以建议一种方法来调整赛门铁克以适应这种情况吗?
Try 尝试
$('#thumbs img').click(function(){
var imgsrc = $(this).attr('src');
$('#mainphoto img').fadeOut(function(){
$(this).attr('src', imgsrc).fadeIn();
});
});
Try this 尝试这个
$('#thumbs img').click(function() {
var imgsrc = $(this).attr('src');
$('#mainphoto img').fadeOut().attr('src', imgsrc).load(function() {
$(this).fadeIn();
});
});
I have done an example in jsFiddle for you. 我在jsFiddle中为你做了一个例子。
Basically, what I do is to listen the click event over the image. 基本上,我所做的是在图像上听点击事件。 When the click is performed, I change the display of the current image to none, also change the src of the image to the new one and then do the fadeIn (which restores the display).
执行单击时,我将当前图像的显示更改为none,同时将图像的src更改为新图像,然后执行fadeIn(恢复显示)。
The Javascript code is: Javascript代码是:
$('#image').click(function(){
$(this).css("display", "none");
$('#image').attr('src', 'http://www.stat4you.com/theme/0.1.11/images/stat4you.png');
$("#image").fadeIn("slow");
})
In the jQuery documentation page of fadeIn ( here ) there are some other similar examples: 在fadeIn( 这里 )的jQuery文档页面中,还有一些其他类似的例子:
$('#thumbs img').click(function () {
var imgsrc = $(this).attr('src');
$('#mainphoto img').fadeOut(function () {
$(this).attr('src', imgsrc);
$(this).fadeIn();
});
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.