javascript - Jquery：图像src交换上的淡入淡出

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中为您做了一个示例。

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

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();
            });
        })