2012-01-02 9 views
1

スライダーエフェクトを作成するための基本スクリプトを実行しています。私は単純に要素を切り替えるためにセットアップを持っています。ちょうど切り替えるのではなく、私はfadeOut/fadeInエフェクトを作成しようとしています。見つかったドキュメンテーションは各スクリプトごとに異なるようです...既存のスクリプトにフェード効果を追加するための基本的な方法や初心者レベルの方法がありますか?前もって感謝します。jQuery fadeOut/fadeIn効果ヘルプ。 (jsfiddle)

jsfiddle: http://jsfiddle.net/williamwong/865gG/1/

答えて

0

私の推測では、あなたが不透明プロパティを使用してアニメーション()、非表示()は、show()関数を使用することができることです。

1

最も簡単な方法は、jqueryのfadeIn()fadeOut()のメソッドを使用することです。

$('div').fadeIn(); 

これらの方法(fadeIn()fadeOut())のドキュメントは素晴らしい例を有しています。

EDIT

は、ここで私はそれを使用するようにコードを変更するであろう方法は次のとおりです。

var cycle = window.setInterval(next, 2000); 

function next() { 
    $('#slides .current').fadeOut(function(el) { 
     $(this).removeClass('current').next().add('#slides :first').last().addClass('current').fadeIn() 
     }); 
} 

は基本的に、あなたはフェードアウトは次の項目にフェード完了するまで待ちたいです。それ以外は、あなたのコードはほとんど同じです。あなたのフィドルの

更新フォーク - http://jsfiddle.net/9BQTH/2/

+0

こんにちはケコアは、あなたの推薦をいただき、ありがとうございます。私はあなたがここに置いたスクリプトに従っていた(フィドルはそれに合っていなかったし、まったく正しく働いていなかった)、そしてスクリプトは、大抵の場合、うまく働いている。私が持っている唯一の質問は、サイクルが完了した後にページの位置を変えるのを避ける方法と、フェードイン効果が働く前にサイクル全体を一度通過する必要がある理由です。前にこのようなことを見たことがありますか?ここに更新された手品があります:http://jsfiddle.net/williamwong/9BQTH/4/ –