0

右から左へのjQueryアニメーションに問題があります。私のJSコードは次のようになります：

$('.tabs').each(function(index){
    $(this).click(function(event){
        $('.tabs').css('left', '1410px').removeClass('open');
        $('.blocks').css('width', '0px');
        $('.blocks').css('left', '1385px');
        $(this).animate({left: '1397px'}, 200).addClass('open');
        $('.blocks').eq(index).animate({left: '520px'}, 2500);          
        });
    });

私のフィドルデモで見ることができる残りのコード: http://jsfiddle.net/DM346/5/

ご覧のとおり、(右から左に) 正しくアニメーション化されていますが、テキストブロック全体が透明です (幅を 0 に設定しているのでわかりますが、他の方法でボタンにポップアップするため、それを行う必要があります)。

http://jsfiddle.net/6dwvs/19/のようなことを達成したいのです が、私の例のように右から左へ。誰か助けてくれませんか？基本的に問題はテキストブロックの「非表示」です。

4

2 に答える 2

2

z-index を使用してコンテナーを適切に配置します。FIDDLE

追加：

#tabs-cont {
    overflow:hidden;
    z-index:20;
}

.blocks {
    z-index:-1;
}

タブを div でラップする

<div id="tabs-cont">
    <div class="tabs" id="tab1">HOME</div>
    <div class="tabs" id="tab2">VIDEO</div>
    <div class="tabs" id="tab3">TEXT</div>
    <div class="tabs" id="tab4">CONTACT US</div>
    <div class="tabs" id="tab5">HELP</div>
</div>

js を次のように変更します。

$(document).ready(function () {
    $('.tabs').each(function (index) {
        $(this).click(function (event) {
            $('.tabs').css('left', '895px').removeClass('open');
            $('.blocks').css('left', '875px');
            $('.blocks').css('width', '865px');
            $(this).animate({
                left: '875px'
            }, 200).addClass('open');
            $('.blocks').eq(index).animate({
                left: '0px'
            }, 2500);
        });
    });
});
于 2013-11-03T23:27:41.133 に答える
0

この問題を解決する方法を見つけました！jQuery animate() :) var time = 2500; の step() 関数を使用しました。

    var blockWidth = 0;
    $('.blocks').eq(index).css('width', '0px');
    $('.blocks').eq(index).animate(
    {
    left: '520px'
    },
    {
        duration: time,
        step: function( test ){
            if(blockWidth < 865)
            {
                console.log( "blockWidth: ", blockWidth);
                blockWidth +=6;
            }                   
            $('.blocks').eq(index).css('width', blockWidth);
        }
    }
    );

今では完璧に動作します！:)

于 2013-11-04T01:43:48.927 に答える