在jQuery中用變量改變動畫方向

我搜索了這個主題，我發現了一些響應，但他們似乎沒有用於我的代碼。我的代碼部分是這樣的：在jQuery中用變量改變動畫方向

var direction = "left"; 
var speedvar = 3000; 
var container_w = parseInt($("#lr-s").width()); 

$("#lr-s ul#"+number).animate({"left": "-="+container_w}, speedvar, "linear", function() {});

如果我設定的方向手動將其工作正常，但是當我這樣做：

$("#lr-s ul#"+number).animate({direction: "-="+container_w}, speedvar, "linear", function() {});

把「方向」變量dosnt似乎工作。我需要的方向變化（「左‘右’，‘底’，‘頂’），以便改變符號 - =爲+ = dosnt適合我，我也試過：

var settings = {}; 
settings[direction] = container_w; 
$("#lr-s ul#"+number).animate(settings, speedvar, "linear", function() {});

和

var settings = {"left": "-="+container_w}; 
$("#lr-s ul#"+number).animate(settings, speedvar, "linear", function() {});

沒有與方向變量工作。鮑勃迪倫方向手動工作確定，但我想設置一個變量來簡化改變該插件的用戶的方向。請幫助。謝謝。

來源

2012-07-13 Jonathan Calb

不知道該如何解釋真的很好，但我不認爲property屬性可以是一個var，該值可以是一個var，但該屬性本身不應該是一個var。我不知道這是否屬實，但在我的腦海中是有道理的。這就像是你在js，var name中定義一個var;現在你試圖改變聲明中的「var」部分，當你唯一可以改變的是「名稱」。對不起，如果這聽起來令人困惑或不真實。 – Huangism 2012-07-13 18:36:46

單獨設置「左」和「右」動畫的部分問題是您要設置兩個不同的值。所以基本上，如果你先'左'然後去'正確'你的元素將會有這樣的結果：

這實際上是總的 – jeschafe 2012-07-13 19:01:46

我明白你說黃道理，但我希望有一種方式，因爲如果不是我將不得不放條件並每次重複不同參數的整個動畫代碼，我不認爲這是一個很好的做法。 Jeschafe你誤解了我，我知道我不能設置2個參數;我當時只需要一個。我的想法是，你在代碼中完成方向變量，然後程序將以這種方式進行動畫製作。 – 2012-07-13 20:18:52

這裏有一些注意使它工作：

1）建立與動態分配的屬性名對象的正確方法：

var settings = {}; 
settings[direction] = scrollAmount; 
$("#lr-s ul#"+number).animate(settings, speedvar, "linear", function() {});

2）不要忘記重置當前動畫屬性啓動動畫「反」屬性後。當兩個相反的屬性被分配給一個元素時，瀏覽器使用'優先'屬性來定位這個元素。這意味着'左'屬性勝過'右'，'頂部'勝過'底部'。

$('#bullet').css('left', '');

下面是一個例子： HTML：

<div style="position:relative; margin-top:100px; height:100px; background-color:Yellow;"> 
    <p id="ship" style="position:absolute;">ship</p> 
</div> 

<button type="button" onclick="Anim.changeDir();">change direction</button>

腳本：

$(function() { 
     Anim.start('left', '+=500'); 
    }); 

    var Anim = { 

     lastDir: 'left', 
     lastShift: '+=500', 

     $el: function() { 
      return $('#ship'); 
     }, 

     start: function (dir, shift) { 

      dir = dir || (this.lastDir == 'left' ? 'right' : 'left'); 
      shift = shift || this.lastShift; 

      var prop = {}; 
      prop[dir] = shift; 
      this.$el().animate(prop, 5000); 

      if (this.lastDir) { 
       this.$el().css(this.lastDir, ''); 
      } 

      this.lastDir = dir; 
      this.lastShift = shift; 
     }, 

     stop: function() { 
      this.$el().stop(); 
      return this; 
     }, 

     changeDir: function() { 
      this.stop(); 
      this.start(); 
     } 
    }

來源

2012-07-13 20:55:08 Rustam

switch (direction){ 
     case 'right': 
      jQuery(element).animate({ 'right': offset }, 500, 'easeOutCubic'); 
      break; 
     default: 
      break; 
    }

來源

2014-07-15 08:37:51

在jQuery中用變量改變動畫方向

回答

相關問題