jQuery添加淡入/淡出

Question

我有一个小拇指画廊，当点击它时，它会交换div #main_img中包含的主图像。以下代码正在运作。

$("#thumbs a").click(function(){
    $("#main_image").html($("<img>").attr("src",this.href));
    return false;
});

    <div id="main_image" class="main_image_style"><img  id="main_pic" src="images/prod_smallpearl.jpg" alt""  /></div>

    <div id="thumbs"><a href="images/prod_smallpearl.jpg"><img src="images/icon_smallpearl.png" alt=" " /></a></div>

我想添加淡入/淡出。我尝试了各种不同的东西，但我是jQuery的新手，我正在旋转我的车轮。谢谢你的帮助。

Answer 1

您需要在fadeOut()上使用回调来获得正确的排序：

http://jsfiddle.net/isherwood/zfm9c/

$('#thumbs a').click(function () {
    var mySrc = $(this).attr('href');

    $('#main_image > img').fadeOut(function() {
        $(this).attr('src', mySrc).fadeIn();
    });

    return false;
});