Исчезновение в атрибуте с Jquery + аккордеон - PullRequest
Новая
       17

Исчезновение в атрибуте с Jquery + аккордеон

1 голос
/ 22 февраля 2012

Я использую 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 работать должным образом?

Спасибо!

Ответы [ 2 ]

2 голосов
/ 22 февраля 2012

Чтобы пометить изображения, они оба должны быть на странице, поэтому вы не можете просто переключить источник. 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');
        });
    }
});
2 голосов
/ 22 февраля 2012

Вы должны сначала спрятать изображение перед тем, как его растушевать: 

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

DEMO

Чтобы получить более аккуратный эффект,Вы можете исчезнуть, вместо того, чтобы резко скрыть изображение.Ключевым моментом здесь является использование параметра обратного вызова метода .fadeOut () , чтобы гарантировать полное исчезновение изображения перед изменением его источника и постепенным исчезновением: 

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

DEMO

...