добавление переменной Number в положение div в jquery?

Question

Я получил следующий код для работы с .animate, но он не работает со стандартными свойствами CSS, может кто-нибудь сказать мне, почему?

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

Получил несколько похожих рабочих подходов и немного узнал о синтаксисе, хорошие шоу люди, Та!

Answer 1

Вы не можете использовать оператор += в обычном CSS.Получить текущую позицию и рассчитать новую позицию из этого:

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

Answer 2

2 вещи.Прежде всего, left ничего не делает в CSS, если вы не установите другой тип position.Поэтому убедитесь, что #object имеет position:relative (или абсолютное, или фиксированное).

Во-вторых, вы не можете использовать += в строке значения, подобной этой.Вам нужно получить значение, добавить свое значение, а затем настроить его на это.

Оформить этот рабочий пример: http://jsfiddle.net/d9LnJ/4/

Но на самом деле, почему бы просто не использовать .animate?

Answer 3

Добавьте атрибут CSS position и установите его на relative; это сработает. Я также удалил +=, поскольку он там не принадлежит:

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

Если вы хотите перемещать object на число пикселей, определяемое xMove вправо, каждый раз, когда вы нажимаете на него, вы можете использовать следующий фрагмент кода:

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

Answer 4

Попробуйте это, должно работать,

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 );

Answer 5

Попробуйте

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

Помните, что #object должен иметь абсолютную или относительную позицию при работе со свойством css left. Если он статический, вы можете попытаться анимировать поле слева.