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

JQuery sliding one table form out and the other slide in a loop

本文关键字：循环 表格 另一个 JQuery 一个      更新时间：2023-09-26

我有两个表格表单（每个表单都在带有类"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/

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'});
    });
});​
相关文章：