2

2 つのボックスがあり、最初のボックスには「オープン」があります <button>

<div id="box1">
    <button id="open" type="button">Open</button>
</div>
<div id="box2"></div>​

[開く ] をクリックする<button>と、最初のボックスが左に 50% スライドし、[開く] ボタンを[閉じる] ボタンに変更します。私はこのjQueryソリューションを思いつきました:

$(function() {
    $('#open').on('click', function() {
        $('#box1').animate({
            right: '50%'
        }, 500, function() {
            $('#open').text('Close').attr('id', 'close');
        });
    });

    $('#close').on('click', function() {
        $('#box1').animate({
            left: '50%'
        }, 500, function() {
            // alert('done');
        });
    });
});​

IDとテキストを変更することができました<button>（Inspect Elementで確認）。ただし、「閉じる」 <button>をクリックしても機能しません。ここで何が問題になっているようですか？私はそれが閉じるが運がないかどうかを確認するために試してみalert(1)ました.$('#close') ID

ここでjsFiddle 。

4

5 に答える 5

3

あなたが変更した場合

$('#close').on('click', function(){...});

これに

$('#box1').on('click', '#close', function(){...});

これはこのデモのように機能しますが、このデモのように他の方法で機能させることもできます。

于 2012-10-19T07:35:34.913 に答える
1

live()を使用する必要があります。

近いアニメーションも作るright: '20%'

ワーキングjsFiddle

于 2012-10-19T07:20:11.510 に答える
1

toggleid demoを変更せずに使ってみてください 

$('#open').toggle(function() {
    $('#box1').animate({
        right: '50%'
    }, 500, function() {
        $('#open').text('Close');
    });
}, function(){
    $('#box1').animate({
        right: '20%'
    }, 500, function() {
        $('#open').text('Open');
    });
});
于 2012-10-19T07:20:17.113 に答える
1

ワーキングデモ

別のデモありがとう @Sheikh: DEMO

それがあなたの原因に合うことを願っています:)

コード

   $(function() {
    $('#open').on('click', function() {
        $('#box1').animate({
            right: '50%'
        }, 500, function() {
            $('#open').text('Close').attr('id', 'close');
        });
    });

    $(document).on('click', '#close', function() {
        $('#box1').animate({
            left: '50%'
        }, 500, function() {
            alert('done');
        });
    });
});​
于 2012-10-19T07:20:25.503 に答える