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滑動一個表格形式出來，另一個滑動循環

回答

相關問題