0

http://api.jquery.com/fadeOut/ <- フェードアウト API

Javascript を学ぼうとしていて、Codepen で見つけたスニペットで遊んでいます。

ランダムなテキスト配列スニペットが別のテキスト オブジェクトに遷移するときに、テキストがフェードアウトするようにしようとすると問題が発生します。現在、配列は循環し、Math.Random 関数 (5*1) を使用して配列から文字列をランダムに選択し、新しいテキスト オブジェクトが読み込まれるたびにフェードインしますが、フェードアウトしたいのですが、そうではありません。 .fadeOut プロパティを適切に利用しているとは思いません。テキストがフェードアウトするようにするにはどうすればよいですか?

var textTimer;
var inTransition = false;

startTimer();

function startTimer() {
clearTimeout(textTimer);
textTimer = setTimeout(changeTitle, 3500);
}


changeTitle();
var titleNumber = Math.floor(Math.random() * 5) + 1;
function changeTitle() {
var titleArray = [
    "Test1",
    "Test2",
    "Test3",
    "Test4",
    "Test5"
];
var tempTitleLength = titleArray.length - 1;

if (inTransition == false) {
    inTransition = true;
    titleNumber++;
    if (titleNumber > tempTitleLength){
        titleNumber = 0
    }
    $('.text').html(''); 
    $('.text').css({opacity: '0'});
    $('.text').html(titleArray[titleNumber]);
    $('.text').fadeOut(); 
    $('.text').stop().delay(0).animate({
        opacity: 1
        }, 1500, function() {
            inTransition = false;
            startTimer.()
        });
}

}

ありがとう！:D

HTMLはかなり単純です

 <div class="text"></div>
4

3 に答える 3

1

コードに構文エラーがあります。エラーにstartTimer.()なるはずですが、関数を. でstartTimer()閉じていません。これを修正し、レビュー用にサンプルの JSFiddle をセットアップしました。それ以外の場合は機能しているようです。 startTimer}

サンプルの JSFiddle は次のとおりです。 ここをクリック

于 2013-10-20T03:26:09.477 に答える
1

複数の問題:

$('.text').html(''); 
$('.text').css({opacity: '0'});
$('.text').html(titleArray[titleNumber]);

フェードアウトせずに html('') のテキストを既に削除しており、css opacity を遅滞なく 0 に設定し、アニメーションなしで html の新しいテキストを設定しています。

構文エラーもあり、startTimer.()タイプミスだと思います。

最初の 2 行を削除し、フェードアウト後に新しいテキストを設定します。

また、fadeIn を実行する前に、fadeOut が終了するのを待つ必要があります。したがって、シーケンス：fadeOut、新しいテキストを設定、fadeIn。このような：

    $('.text').fadeOut(1500, function () {
        $('.text').html(titleArray[titleNumber]);
        $('.text').fadeIn(1500, function () {
            inTransition = false;
            startTimer()
        });
    });

JSFiddle: http://jsfiddle.net/Dzyzw/

于 2013-10-20T03:38:51.447 に答える