div要素に繰り返しcss3変換を適用する方法

私は右に移動するには(移動クラスを追加する)css3トランスフォームを適用してdivを持って、左から移動クラスを削除します。私のdiv(id = container)を右に移動するためにmoveクラスを追加した後、2回目のmoveクラスを追加した後でdivを右にもう一度作ることができます。 "Move right"と "Move left"のボタンをそれぞれクリックすると、jqueryでMoveクラスが追加または削除されます。

ここに私のコードです:

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#bMoveRight').on('click', function(e){
            $('#container').addClass('move');
        });

        $('#bMoveLeft').on('click', function(e){
            $('#container').removeClass('move');
        });
    });     
    </script>
    
        </head> (should match the opening <head> tag, omitted due to restraints on the posting)
            <body>
<div id="container">This is a good testing container that I hope will behave itself</div>

<button id="bMoveLeft">Move left</button> <button id="bMoveRight">Move right</button>

</body>
0

2 答え

1つの要素に同じクラスを2回適用する方法はありません。その代わりに、要素に現在どのクラスが適用されているかを確認し、それぞれがより大きな変換プロパティを持つ正しい変換クラス(move2、move3など)を適用することを確認することができます。

.move2 {
    transform: translateX(200px);
    -webkit-transform: translateX(200px);
}
0
追加された
さて、私はそれを試してみる
追加された 著者 Christian Mampuya,

あなたの返事に基づいて、ちょっとしたあなたの考えを微調整して、私が望むものを得ました。私はcssクラスを削除し、jqueryを使ってその変換をオンザフライで適用しました。私のコードは次のようになります:

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        var count = 0;
        $('#bMoveRight').on('click', function(e){
            ++count;
            $('#container').css('-webkit-transform', 'translateX(' + count + '00px)');
        });

        $('#bMoveLeft').on('click', function(e){
            --count;
            $('#container').css('-webkit-transform', 'translateX(' + count + '00px)');
        });
    });     
    </script>
    

            <body>
        <div id="container">This is a good testing container that I hope will behave itself</div>
        

<button id="bMoveLeft">Move left</button> <button id="bMoveRight">Move right</button>

</body>
0
追加された