Question

我正在使用jquery +手风琴插件。那工作得很好。现在，我想在手风琴选择改变时改变页面上的另一个图像。我也有这个工作。以下是实现这一目标的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而不是突然隐藏图像。这里的关键是使用.fadeOut()方法的回调参数来确保图像完全消失，然后再更改其源并将其淡入：

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

<强> DEMO

Answer 2

要交叉淡化图像，它们都需要在页面上，因此您不能只是切换源。 jsFiddle

$("#accordion").accordion({
    changestart: function(e, ui) {
        var src = $(ui.newHeader).data('src');
        $("#posterHolder .poster").addClass('outgoing');
        $("#posterHolder").append('<img src="' + src + '" class="poster incoming" style="display:none;" />').show(1000,function(){
            $("#posterHolder .outgoing").remove();
            $("#posterHolder .incoming").fadeIn(2000).removeClass('incoming');
        });
    }
});

使用Jquery + accordion淡化属性

2 个答案: