2011-02-09 7 views
0

私はjQueryのサイクルLiteのプラグイン(http://jquery.malsup.com/cycle/)の問題が生じていますがjQueryのサイクルは、同時フェード

画像がフェードインする前に完全にフェードアウトしているようだ、と私同時にフェードイン/アウトしたいhttp://hardingandwhitlock.com/v6/content/background

は私が1

$.fn.cycle.defaults = { 
    timeout:  2000, 
    speed:   200, 
    next:   null, 
    prev:   null, 
    before:  null, 
    after:   null, 
    height:  'auto', 
    sync:   1,  
    fit:   0,  
    pause:   0,  
    delay:   0,  
    slideExpr:  null 
}; 

に設定syncオプション任意のヘルプははるかに高く評価さを持っています!

答えて

1

ある画像から別の画像へのクロスフェードトランジションを実行しようとしているようです。そのよう#frontImgの後ろにあることを

<img id="backImg" /> 
<img id="frontImg" /> 

設定#backImg:これを行うには、次の2枚の画像を使用したいと思うその後

#backImg 
{ 
    position: absolute; 
} 

は正面画像をフェードアウト...これは自動的にクロスフェードを行います背面の画像が既にその背後にロードされているために効果があります。フェードが行われた場合、バック画像のsrcに正面画像のソースを設定し、それを表示し、背面の画像に次の画像をプリロード:

function transitionImages(preloadImgUrl) 
{ 
    $("#frontImg").fadeOut("slow", function() 
    { 
     $("#frontImg").attr("src", $("#backImg").attr("src")).show(); 
     $("#backImg").attr("src", preloadImgUrl); 
    } 
} 

このすべては、あなたのイメージが同じサイズであると仮定しています。もしそうでなければ、あなたはCSSでもう少し精巧になり、消えるdivsの画像を包み込みたいと思うでしょう。

+0

私はそれを理解したようですが、あなたの提案に感謝します。 – Melody

1

これは、いくつかの<br><img>タグの間に挿入されることによって引き起こされてしまった、とスクリプトは、すべての画像

サイトはDrupalの中で行われているので、画像間の中にも/アウトのものをフェージングましたDrupalはinseに思わ

<div id="slideshow"><img src="" /><img src="" />...</div> 

の代わりに別の行に

<div id="slideshow"> 
    <img src="" /> 
    <img src="" /> 
</div> 

として体内に挿入されるべきですrt <br>をそれぞれ別々の行の間に置きます。他のCMSが同じことをするかわからない

関連する問題