試圖使點擊動畫可重復

Question

我正在嘗試制作一個水平滑動的欄。 如果位於左側，它將向右滑動。 如果位於右邊，它將向左滑動。 最終，它將並排包含多個條，這些條會滑開以顯示不同的圖像。

現在它可以正常工作，除非我似乎無法弄清楚如何使它點火一次。 無論如何，我都不是一個javascript人，所以只要朝正確的方向稍加推動就可以了。

謝謝
路加

    <!DOCTYPE html>
    <html>
    <head>
    <script src="jquery.js"></script>
    <script>
    var x=1;
    $(document).ready(function(){
      if( x==1 )
      {
        x=2;
        $("#block").click(function()
         {
          $("#block").animate({right:'20px'});
         });
        return;
      }

      if( x==2 )
      {
        x=1;
        $("#block").click(function()
         {
          $("#block").animate({left:'20px'});
         });
        return;
      }


    });
    </script>
    </head>



    <body>

    <p> This block should slide right if it's positioned left, and slide left if it's positioned right. It should repeat this behavior indefinitely. Right now it's being very naughty indeed!</p>

    <div id=block style="background:#98bf21;height:100px;width:16px;position:absolute;">
    </div>

    </body>
    </html>

Answer 1

將事件綁定到if語句中，並將條件放入附帶事件中。

現場演示

$(document).ready(function(){
    var x=1;           
    $("#block").click(function()
    {
       if( x==1 )
       {
           x=2;
           $("#block").animate({right:'20px'});
       }
       else
       {
           x=1;
           $("#block").animate({left:'20px'});
       }
     });
 });

為了保持規則周期，您可能需要更改代碼，如下所示

現場演示

$(document).ready(function() {
    var x = 1;
    $("#block").click(function() {
        if (x == 1) {
            x = 2;
            $("#block").animate({
                right:  '20px',
                 left: '0px'
            });
        }
        else {
            x = 1;
            $("#block").animate({
                left: '20px',
                 right:  '0px'
            });
        }
    });
});

Answer 2

你不能簡單的動畫left和right ，因為jQuery不知道確切的結束位置，當你改變left: 0到right: 0 。 您可以做的是自己計算並僅使用left 。 其他一些事情是：

使用布爾值來翻轉而不是數字
不決定綁定哪個事件處理程序，而是確定在調用該處理程序時應該發生什么
使用$(this)作為當前元素

http://jsfiddle.net/HZRWJ/

$(document).ready(function(){
    var isLeft = true;
    $("#block").click(function() {
        var fullWidth = $(document).width();
        var elemWidth = $(this).width();
        if(isLeft) {
            $(this).animate({ left: fullWidth - elemWidth });
        } else {
            $(this).animate({ left: 0 });
        }
        isLeft = !isLeft;
     });
});

Answer 3

這是否與您想要的東西類似？

小提琴演示

$("#block").data('position', 'left');
$("#block").click(function() {
    var elem = $(this);
    resetElementPosition(elem);
    switch (elem.data('position')) {
        case 'left': elem.animate({ right: '20px' }); elem.data('position', 'right'); break;
        case 'right': elem.animate({ left: '20px' }); elem.data('position', 'left'); break;
        }
});

function resetElementPosition(element)
{
    element.css({ 'left' : 'auto', 'right' : 'auto' });
}

Answer 4

如果要使用多個條，則將值存儲在jQuery對象中可能會更容易。

$(document).ready(function(){

   $("#block").each( function( ) {

       // associate data with each element. At the moment there should 
       // only be one but if this is implemented as a class there may
       // be more
       $(this).data("x", 0);

   });

   $("#block").click( function( ) {

       // 0 will push it to the right as 0 => false
       if( $(this).data("x") ) { 

           $(this).data("x", 0 );

           // removing the css property allows you to use left & right
           $(this).css("right","").animate({left:'20px'});

       } else {

           $(this).data("x", 1 );

           $(this).css("left","").animate({right:'20px'});

       }
     });
   });

在這里演示

試圖使點擊動畫可重復

問題描述

4 個解決方案

解決方案1
3 已采納 2012-11-14 14:47:16

解決方案2
0 2012-11-14 14:54:24

解決方案3
0 2012-11-14 15:00:55

解決方案4
0 2012-11-14 15:19:13

試圖使點擊動畫可重復

問題描述

4 個解決方案

解決方案1 3 已采納 2012-11-14 14:47:16

解決方案2 0 2012-11-14 14:54:24

解決方案3 0 2012-11-14 15:00:55

解決方案4 0 2012-11-14 15:19:13

解決方案1
3 已采納 2012-11-14 14:47:16

解決方案2
0 2012-11-14 14:54:24

解決方案3
0 2012-11-14 15:00:55

解決方案4
0 2012-11-14 15:19:13