Jquery + accordionによる属性のフェーディング

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()メソッドのコールバックパラメータを使用することで、完全にそのソースを変更し、それを退色する前に。消える：彼らの両方をする必要がクロスフェード画像に

$("#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'); 
     }); 
    } 
});