Jquery:fadeIn on image src swap

时间:2012-11-06 07:18:53

标签: javascript jquery html fadein

我有一块JQuery脚本可以在点击时更改图像的src:

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

我想知道是否有办法将.fadeIn()添加到此处?

我试过了:

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

但这不起作用。

有人可以建议一种方法来调整赛门铁克以适应这种情况吗?

4 个答案:

答案 0 :(得分:3)

尝试

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

答案 1 :(得分:3)

试试这个

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

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

答案 2 :(得分: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(here)的jQuery文档页面中,还有一些其他类似的例子:

答案 3 :(得分:1)

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