z-indexをjqueryプラグインサイクルでうまく再生する方法
-
05-10-2019 - |
質問
の右下の例を見てください JQuery Cycle Advanced Demosページ.
ギャラリーをループすると、次の画像がどのように進むかに注意してください 下 最後は、次の画像が常に前の画像をカバーする他の人とは対照的に?まあ、少なくともFirefox 3.6.3では。
同じ問題を抱えているjQueryサイクルでカスタムアニメーションを開発しています。ループすると、次の画像が終了するのではなく下になります。
これは私が渡す私の構成オブジェクトです cycle()
.
{
fx: 'custom',
timeout: 5000,
easing: 'easeInOutQuad',
pause: 1,
cssFirst: {
zIndex: 0
},
cssBefore: {
display: 'block',
top: -500,
opacity: 1,
zIndex: 1
},
animIn: {
top: 0,
opacity: 1
},
animOut: {
opacity: .2
},
cssAfter: {
display: 'none',
opacity: .2,
zIndex: 0
},
delay: -1000
}
基本的にアニメーションはと同じです cover
FXを除いて、次の画像が上に降りてくると、前の画像が消えてはなりません。
前のスライドをカバーするためにループするときに次のスライドを取得する方法はありますか?
ありがとう
解決
私はハッキーなアプローチで行きましたが、それはうまくいきます...
$headerImage.find('#gallery ul').cycle({
fx: 'custom',
timeout: 5000,
easing: 'easeInOutQuad',
pause: 1,
cssFirst: {
zIndex: 1
},
cssBefore: {
display: 'block',
top: -400,
left: 0,
opacity: 1,
zIndex: 1
},
animIn: {
top: 0,
opacity: 1
},
animOut: {
opacity: .2
},
cssAfter: {
display: 'none',
opacity: .2,
zIndex: 0
},
delay: -1000,
after: function(current, next) {
// Had problems when it was looping that the new one wasn't covering the previous one. This hack fixes that.
if (next == $headerImage.find('li:last')[0]) {
$headerImage.find('li:last').css({ zIndex: -100 });
};
}
});
所属していません StackOverflow