在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中用变量改变动画方向

回答

相关问题