Question

我有两个表格形式（每个表格都在一个带有'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/

Answer 1

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'});
    });

});

JQuery滑动一个表格，另一个滑动循环

1 个答案: