jquery - 使用 Jquery + Accordion 淡入属性

Question

我正在使用 jquery + Accordion 插件。效果很好。现在，我希望当 Accordion 选择发生变化时，页面上的另一个图像也会发生变化。我也已经做到了。这是实现这一目标的 JQuery:

//Triggers events on Accordion change
    $(function() {
        var accOpts = {
            changestart: function(e, ui) {
                 var src = "images/about/" + ui.newHeader.html().match(/[\w]+[_][o]/) + ".png";
                $("#poster").attr("src", src);
            }
        };
        $("#accordion").accordion(accOpts);
    });

现在一切都正常了，我希望图像淡入，替换旧的图像。我尝试像这样实现 fadeIn 函数: $("#poster").attr("src", src).fadeIn(3000);，但这不起作用。关于如何修改此代码以使 fadeIn 正常工作的任何想法？

谢谢!

Answer 1

您必须先隐藏图像，然后才能淡入:

$("#poster").hide().attr("src", src).fadeIn(3000);

<强> DEMO

为了获得更简洁的效果，您可以淡出而不是突然隐藏图像。这里的关键是使用 .fadeOut() 的回调参数确保图像在更改来源并淡入之前完全消失的方法:

$("#poster").fadeOut(function() {
    $(this).attr("src", src).fadeIn();
});

<强> DEMO