1

我有两个表格形式（每个表格都在一个带有“box”类的 div 中）我正在尝试使用 jquery 动画将一个表格移出屏幕，然后将另一个表格移入，然后当那个按钮再次单击时，原始表单会从移动的位置返回。这是其中一种形式的 HTML（两者几乎相同，另一种的 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 回答