0

スライド タイトルが停止し、サイクルが完了しません。スライドを完成させるためのコードに欠けているものは何ですか?

<div id="overflow-animate">
    <div id="animate-container">
        <h1 class="giga remove-bottom">title1</h1>
        <h1 class="giga remove-bottom">title2</h1>
        <h1 class="giga remove-bottom">title3</h1>
        <h1 class="giga remove-bottom">title4</h1>
        <h1 class="giga remove-bottom">title5</h1>
    </div>
</div>

jQuery:

//SET DELAY TO MODIFY THE DELAY OF THE INTRO ANIMATION
//INTRO ANIMATION
var delay = 1200;
var titleheight = $('#animate-container h1').outerHeight();
var count = $('#animate-container').height() / titleheight;

for (var i = 0; i < count; i++) {
    var distance = titleheight * i;
    $('#animate-container').delay(delay).animate({'top': '-' + distance + 'px'}, 400, 'easeOutBounce');
}

$('#animate-container').delay(800).animate({'top': '0px'}, 500, 'easeOutBounce');

if ($(".home .cover i").length > 0 && $(window).width() > 767) {
    $('.home .cover i').delay((count * delay) + (delay * 2)).animate({'top': $('.cover i').offset().top - 180}, 500, 'easeOutBounce', function() {
        //$('.cover h3').fadeIn(500);
    });
}
//END WINDOW ANIMATION

http://jsfiddle.net/YH5QV/5/

4

1 に答える 1

1

これで問題が解決するはずです：

var container = $('#animate-container'),
    gigaH1 = container.find('h1'),
    titleHeight = gigaH1.height() + parseInt(gigaH1.css('margin-top'), 10);
(function animateH1() {
    for (var i = 0; i < gigaH1.length; i++) {
        container.delay(1200).animate({
            'top': '-' + titleHeight * i
        }, 400, 'easeOutBounce');
    }
    container.delay(800).animate({ 'top': 0 }, 500, 'easeOutBounce', animateH1);
}());

CSS:

#animate-container {
    position: relative;
    float: left;
    top: 0;
}
#overflow-animate {
    overflow: hidden;
    height: 79px;
}

まず、関数が実行されるたびに変更されるわけではないため、コードはいくつかの変数 ( container、 ) をキャッシュします。gigaH1次に、各 H1 をビューの外に移動するために必要なオフセットを計算します。

以下の関数は自己呼び出し型で、元のコードを実行するだけです (いくつかの微調整を加えて)。最後のアニメーションにはanimateH1()関数自体がコールバックとして含まれているため、アニメーション全体が完了すると再び実行されます。

ここで動作しています: http://jsfiddle.net/waAaeD/

于 2013-09-09T13:05:26.477 に答える