1

私は2つのテーブルフォームを持っています（それぞれがクラス「ボックス」のdivにあります）jqueryアニメーションを使用して、1つのフォームを画面の外に移動し、もう1つのフォームを移動しようとしています。をもう一度クリックすると、移動した場所から元のフォームに戻ります。フォームの 1 つの HTML を次に示します (両方ともほとんど同じで、もう 1 つのフォームの ID は「box2」です)。

<a href="#" class="button" style="margin-top: 0px; height: 15px;">Click here to edit!</a>
<div class="box1" style="margin-top: 10px;">
    <form name="getinfo" onSubmit="return validateForm()" method="POST" action="process.php">
        <table class="info" cellpadding="10px">
        <tr>
            <td style="text-align: right; font-size: 13px;">First Name:</td>
            <td id="trfname"><input name="fname" class="infod" type="input" /></td>
            </td>
        </tr>
        <tr>
            <td style="text-align: right; font-size: 13px;">Last Name:</td>
            <td id="trlname"><input name="lname" class="infod" type="input" /></td>
            </td>
        </tr>
        <tr>
            <td style="text-align: right; font-size: 13px;">Cascade:</td>
            <td id="trcascade"><input name="cascade" class="infod" type="input" /></td>
            </td>
        </tr>
    </form>
    </table>
</div>

これは私が試しているコードですが、機能していないようです。コンソール エラーはありません。

$('.button').click(function() {
    var index = $(this).index(".button");
    var $box = $(".box:eq(" + index + ")");

    $(".box").not($box).animate({
        left: '150%'
    }, 500);

    if ($box.offset().left < 0) {
        $box.css("left", "150%");
    } else if ($box.offset().left > $('#main').width()) {
        $box.animate({
            left: '50%',
        }, 500);
    }
});

編集: ここに完全なコード: http://jsfiddle.net/vCguL/

4

1 に答える 1

0

http://jsfiddle.net/iambriansreed/d4Ruz/

jQuery

$(function(){

    $('a.button').toggle(function() {
        $('#box1').animate({'left':'-400px'});
        $('#box2').css({'left':'400px'}).animate({'left':'0'});
    },function() {
        $('#box1').css({'left':'400px'}).animate({'left':'0'});
        $('#box2').animate({'left':'-400px'});
    });

});​
于 2012-07-05T20:02:15.487 に答える