JQuery滑动一个表格形式出来，另一个滑动循环

我有两个表格形式（他们每个人都在一个类'框'div）我试图使用jQuery的动画移动一个窗体并移动另一个，然后再次单击该按钮时，原始表单将从移动的位置返回。以下是其中一种形式的HTML（两者几乎相同，另一种具有'box2'的ID）。JQuery滑动一个表格形式出来，另一个滑动循环

<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/

来源

2012-07-05 Vikram

我只看到一个'box'。请创建一个jsFiddle与所有相关的代码。 – iambriansreed 2012-07-05 18:55:18

@anonymousdownvotingislame只是将其添加到底部。希望能帮助到你。 – Vikram 2012-07-05 18:59:26

首先验证您的代码。你有这么多未封闭的不匹配的标签，它的垃圾射击工作。然后重新发布清理的HTML到小提琴。 – iambriansreed 2012-07-05 19:20:13

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-05 20:02:15 iambriansreed

谢谢，这工作得很好。 – Vikram 2012-07-05 21:16:37

JQuery滑动一个表格形式出来，另一个滑动循环

回答

相关问题