marginLeft как переменная Javascript

Question

Я пытаюсь анимировать «div» в мобильной версии моего сайта.

$(function(){ 
    $("#iconReorder").bind("tap", tapHandler); 

     function tapHandler(event){ 
      $("#iconReorder").animate({ 
       marginLeft: "15px" 
       }, 500); 
     } 
}); 

Когда «ДИВ» Виль изменить положение, я хотел бы иметь возможность еще раз нажать на него, и пусть он вернется в положение по умолчанию.

Я попытался создать оператор 'if' ... но я не могу понять, почему он не работает. Я бы предпочел «marginLeft» моего «div» в качестве переменной для моего кода javascript, чтобы переместить его вправо, если «marginLeft = 10px» и переместить его влево (позиция по умолчанию), если «новый» «marginLeft больше не равен 10px. Я попытался с помощью следующего кода:

var x = ("#iconReorder").style.marginLeft;  

    if (x = "10px") { 
     $(function(){ 
      $("#iconReorder").bind("tap", tapHandler); 

      function tapHandler(event){ 
       $("#iconReorder").animate({ 
        marginLeft: "15px" 
       }, 500); 
      } 
     }); 
    } else { 
     $(function(){ 
      $("#iconReorder").bind("tap", tapHandler); 

      function tapHandler(event){ 
       $("#iconReorder").animate({ 
        marginLeft: "10px" 
       }, 1000); 
      } 
     }); 
    } 

Может кто-нибудь мне помочь? Я надеюсь, что то, что я сказал, понятно. Спасибо

Answer 1

Так что, если я правильно понял, то это должно сделать:

var x = $("#iconReorder");  

x.on('tap', function() { 
    var to = '10px', time = 1000; 
    if (x.css('margin-left') === '10px') { 
     to = '15px'; 
     time = 500; 
    } 
    x.animate({ 
     marginLeft: to 
    }, time); 
}); 

или in action. Я заменил событие tapclick, чтобы я мог видеть, что я делаю. В любом случае, теперь он должен работать лучше.

Возможно, существует какой-то более тонкий способ заставить его работать, но я не могу думать о нем на данный момент (может быть, какой-то метод toggle).

Answer 2

попробовать этот

$("#iconReorder").animate({ 
    'margin-left': 15 
}, 500);