試圖使點擊動畫可重複

我試圖製作一個水平滑動的酒吧。如果它位於左側，它將向右滑動。如果它的位置正確，它會向左滑動。最終這將包含多個並排的酒吧，這些酒吧會滑出來揭示不同的圖像。試圖使點擊動畫可重複

現在它會正常工作，除非我似乎無法弄清楚如何讓它多次觸發。我不是想象中的任何一個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>

來源

2012-11-14 Luke Pighetti

綁定的事件了，如果statment，放在一邊事件的條件。

Live Demo

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

爲了保持規則週期可能需要更改代碼，如下圖所示

Live Demo

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

來源

2012-11-14 14:47:16 Adil

後兩次點擊，元素都得到了'right'和'left' CSS規則，這將不再更新。 – pimvdb

@pimvdb - 我同意 –

謝謝@pimvdb，更新了我的答案，使其成爲循環。 – Adil

給予你不能簡單的動畫left和right，因爲當您將left: 0更改爲right: 0時，jQuery不知道確切的最終位置。你可以做的是自己計算，只使用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; 
    }); 
});

來源

2012-11-14 14:54:24 pimvdb

這是否做一些類似於你想要的東西？

Fiddle Demo

$("#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' }); 
}

來源

2012-11-14 15:00:55

如果你將不得不多條可能更容易儲存在一個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'}); 

     } 
    }); 
    });

演示here

來源

2012-11-14 15:19:13 Bruno

試圖使點擊動畫可重複

回答

相關問題