Jquery：fadeIn on image src swap

Question

我有一个JQuery脚本，可以在点击时更改图像的src：

var imgsrc;
$('#thumbs img').click(function(){
imgsrc = $(this).attr('src');
$('#mainphoto img').attr('src', imgsrc);

我想知道是否有办法将.fadeIn（）添加到此处？

我努力了：

$('#mainphoto img').fadeIn().attr('src', imgsrc);

但这不起作用。

任何人都可以建议一种方法来调整赛门铁克以适应这种情况吗？

Answer 1

尝试

$('#thumbs img').click(function(){
    var imgsrc = $(this).attr('src');
    $('#mainphoto img').fadeOut(function(){
       $(this).attr('src', imgsrc).fadeIn();
    });
});

Answer 2

尝试这个

$('#thumbs img').click(function() {
    var imgsrc = $(this).attr('src');

    $('#mainphoto img').fadeOut().attr('src', imgsrc).load(function() {
        $(this).fadeIn();
    });
});

Answer 3

我在jsFiddle中为你做了一个例子。

基本上，我所做的是在图像上听点击事件。 执行单击时，我将当前图像的显示更改为none，同时将图像的src更改为新图像，然后执行fadeIn（恢复显示）。

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");
    })​

在fadeIn（ 这里 ）的jQuery文档页面中，还有一些其他类似的例子：

Answer 4

$('#thumbs img').click(function () {
 var imgsrc = $(this).attr('src');
            $('#mainphoto img').fadeOut(function () {
                $(this).attr('src', imgsrc);
                $(this).fadeIn();
            });
        })