在jquery中将变量编号添加到div位置？答案

【问题标题】：adding a variable Number to div position in jquery?在jquery中将变量编号添加到div位置？
【发布时间】：2011-04-01 12:45:46
【问题描述】：

我得到了以下代码来使用 .animate，但它不适用于标准 css 属性，谁能告诉我为什么？

var xMove = 200;
$("#clickhere").click(function() { 
$("#object").css({left: '+='+xMove});  
});

现在得到了一些类似的工作方法，并在此过程中学到了一些语法知识，好表演的人，Ta！

【问题讨论】：

嘿，看看这个jsfiddle.net/cM5Qe

标签： jquery variables css

【解决方案1】：

添加CSS属性position，设置为relative；它会工作的。我还删除了+=，因为它不属于那里：

var xMove = 200;
$("#clickhere").click(function() { 
    $("#object").css({position: "relative",left: xMove});  
});

如果你想让你的object每次点击时向右移动xMove定义的像素数，可以使用下面的代码sn-p：

var xMove = 200;
$("#clickhere").click(function() {
    var obj = $("#object");
    var currentPosition = obj.position().left;
    obj.css({position: "relative",left: currentPosition + xMove});  
});

【讨论】：

干杯，看起来像 guffas 和 squeegee 的代码，不过这个结构很像，我很容易理解

【解决方案2】：

试试

$(document).ready(function(){
  var xMove = 200;
  var object = $('#object');
    $("#clickhere").click(function() {
        object.animate({
            left:  (object.position().left + xMove) + 'px'
        });  
    });
});

请记住，使用 css left 属性时，#object 需要具有绝对位置或相对位置。如果它是静态的，您可以尝试为 margin-left 设置动画。

【讨论】：

干杯，这行得通，想知道是否可以不使用动画（如下所述）。
只需将 object.animate({ 更改为 object.css({)
是的，当我看到其他回复时就解决了。尊重！

【解决方案3】：

2 件事。首先，left 在 CSS 中什么都不做，除非您设置不同的 position 类型。所以请确保#object 有position:relative（或绝对的，或固定的）。

其次，你不能像这样在值字符串中使用+=。您必须获取值添加您的值，然后将其设置为执行此操作。

查看此工作示例：http://jsfiddle.net/d9LnJ/4/

但实际上，为什么不直接使用.animate？

【讨论】：

谢谢，这正是我想要的。我想避免动画，因为我计划通过动态改变 var xMove 并循环函数来将“速度”添加到#object。使用 .animate 可以，但这样应用时不是很流畅。

【解决方案4】：

您不能在常规 CSS 中使用 += 运算符。获取当前位置并从中计算新位置：

var xMove = 200;
$("#clickhere").click(function() {
  $("#object").css({ left: ($('#object').position().left + xMove) + 'px' });
});

【讨论】：

niceone，很好吃 ;) 真的应该想到这一点，但仍在学习语法规则

【解决方案5】：

试试这个，应该可以的，

var leftpos = $("#object").css("left"); // get the current left position
var left = parseFloat(leftpos , 10);
left += 200;
var toShift = left + "px";
$("#object").css("left", toShift );

【讨论】：