Question

我正在尝试使用jQuery，并想知道如何实现以下情况：

你有一个按钮和一个div。

<div class="test"></div>
<button id="move">Move</button>

单击按钮，div的marginLeft增加50px。

我已经制作了以下适用于第一次点击的jsFiddle，但不适用于任何后续点击。

http://jsfiddle.net/9KgjQ/

$( "#move" ).on( "click", function() {
      $( ".test" ).css({
          marginLeft: function( margin, value ) {
              margin += 50;
              value = margin + "px";
              return value;
              }
      });
 });

如何做到这一点？

Answer 1

您的marginLeft函数包含错误的参数。第一个是索引，第二个是当前值。所以你可以这样做：

$(function() {
    $( "#move" ).on( "click", function() {
        $( ".test" ).css({
            marginLeft: function( index, margin ) {
                margin = parseInt(margin, 10) + 50;
                value = margin + "px";
                return value;
            }
        });
    });
});

Answer 2

尝试：

$(function() {
  $( "#move" ).on( "click", function() {
      $( ".test" ).animate({
          "margin-left":"+=50px"
      });
   });

});

DEMO here.

Answer 3

试试这个，

$(function() {

  $( "#move" ).on( "click", function() {
      var mleft= $( ".test" ).css('margin-left');
         mleft=mleft.split('p')[0]-0;
      var newMargin=+mleft+50;
      $( ".test" ).css('margin-left',newMargin+'px');

   });

});

<强> New Working demo

如何制作div边距通过按钮点击左增量

3 个答案: