ポートフォリオを表示する1ページのサイトがあります。基本的には、sudosliderでスライドショーとして表示される画像のリストで構成されています
新しいスライドショー(この場合は画像)が読み込まれると、画像の説明が更新されます。
なんらかの理由で、ワードプレスで作成されたこのバージョンでわかるように、説明が2回表示されます。奇妙なことに、このWebサイトの静的バージョンがあり、この問題が発生していないようですが、html / javascript / cssの構造はまったく同じです(何かを見落としている限り)。
関連するコード:
htmlリスト:
<section id="portfolio">
<ul id="portfolio-ontwerpen" class="noscript">
<li>
<figure><img width="800" height="569" src="http://haendehoch.nl/wp/wp-content/uploads/2013/01/klinch1.jpg" class="attachment-large wp-post-image" alt="klinch1" /></figure>
<figcaption>Klinch poster</figcaption>
</li>
<li>
<figure><img width="800" height="565" src="http://haendehoch.nl/wp/wp-content/uploads/2013/01/hh_grid.jpg" class="attachment-large wp-post-image" alt="hh_grid" /></figure>
<figcaption>Grid</figcaption>
</li>
</ul>
</section>
javascript:
var sudoSlider = $("#portfolio").sudoSlider({
afterAniFunc: $("aside figcaption").text($(this).find('figcaption').text()); },
});
この場合の$(this)は、現在のスライドショー(現在のリストアイテム)を指します。
afterAniFuncのsudosliderの説明(基本的に、次のスライドアニメーションが終了した後に実行される関数)
afterAniFunc:false。beforeAniFuncと同じです。アニメーション(まだすべてのアニメーション)が終了した後に実行されます。beforeAniFuncは、fadeを使用する場合は複数回実行されませんが、continuousを使用する場合は複数回実行できます。