0

http://www.caffeuno.co.uk/で見られるようなスライドショーを実装しようとしています。

私はすでにスライドショーを持っていますが、必要なのはこのサイトに示されている機能です:

写真 1、少し待って、テキストをフェードイン、クリック可能なボタンをフェードイン、最大 3 秒待って、写真 2 にロールオーバー、少し待って、テキストをフェードイン、クリック可能なボタンをフェードイン、最大 3 秒待つ秒、ロールオーバー画像 3 など。

誰でもこれを再現するのを手伝ってもらえますか? 素晴らしいことだ。費やした時間と提案に感謝します。

4

1 に答える 1

0

jQuery には .animate() 関数があり、写真やテキストのフェードインとフェードアウトを非常に簡単にアニメーション化できます。

$('#image').animate({
    opacity: 1
}, 5000, function() {
    //Done fading, wait 3 seconds and display the next image
    setInterval(displayNextImage,3000);
});

詳細については、 http://api.jquery.com/animate/を参照してください。

上記の関数を使用して不透明度を 1 にアニメーション化する前に、非表示 (不透明度 0) の画像が現在の画像よりも大きくなるように、画像とテキストを含む div の z-index を変更する必要があります。

これが役立つことを願っています！

于 2013-01-16T16:02:26.027 に答える