0

css3トランスフォームを適用して右に移動（moveクラスを追加）および左に移動（moveクラスを削除）するdivがあります。移動クラスを追加してdiv（id = container）を右に移動させた後、2回目の移動クラスを追加した後、さらに右にdivを作成できるようにしたいと思います。「右に移動」ボタンと「左に移動」ボタンがそれぞれクリックされると、jqueryで移動クラスが追加または削除されます。

これが私のコードです：

    <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>
    <style>
    #container{
        width:100px;
        height:100px;
        background-color:red;
        box-shadow:5px 5px 10px #000;
        word-wrap:break-word;
        transition: translateX 2s;
        -webkit-transition: translateX 2s;
    }

    .move{
        transform: translateX(100px);
        -webkit-transform: translateX(100px);
    }
    </style>
        </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>
<p><button id="bMoveLeft">Move left</button>
<button id="bMoveRight">Move right</button></p>
</body>
4

2 に答える 2

0

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

.move2 {
    transform: translateX(200px);
    -webkit-transform: translateX(200px);
}
于 2013-02-07T10:10:08.113 に答える
0

あなたの返信に基づいて、あなたのアイデアを少し調整することで、私が望んでいたものを手に入れました。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>
    <style>
    #container{
        width:100px;
        height:100px;
        background-color:red;
        box-shadow:5px 5px 10px #000;
        word-wrap:break-word;
        transition: transform 2s;
        -webkit-transition: -webkit-transform 2s;
    }
    </style>

            <body>
        <div id="container">This is a good testing container that I hope will behave itself</div>
        <p><button id="bMoveLeft">Move left</button>
        <button id="bMoveRight">Move right</button></p>
  </body>
于 2013-02-08T08:58:57.117 に答える