jQuery点击事件添加margin-left

Question

我在JS中尝试了一个非常简单的东西，但是我无法让它工作...

当我点击一个

时，我想要给另一个

添加一个负的margin-left，但是我希望每次点击

时都发生这种情况，而不仅仅是像现在这样只发生一次。 每次我点击我的#next_nav时，我希望#nav从-10px移动。 这里它只能工作一次。 这是我的JS代码：

$(function() {
  $('#next_nav').click(function() {
    $("#nav").css('margin-left', '-10px');
  });
});

我的HTML代码：

<div id="next_nav"></div>
<div id="nav"></div>

这是我的JSFiddle链接：http://jsfiddle.net/Beyzd/ 有人能帮我吗？

- mmdwc

Answer 1

在你的值前添加一个=：

$(function() {
    $('#next_nav').click(function() {
       $('#nav').css('margin-left', '-=10px');
    });
});

工作中的Fiddle

编辑

如果您想要进行动画处理，请使用 animate() 方法。这是一个适用于您的 fiddle。

- AloneInTheDark

---

能否添加动画使其移动？比如使用.animate慢速移动？ - mmdwc

谢谢@AloneInTheDark，但是在你的fiddle中，边距不是10px，而且当再次点击#next_nav时，我的导航会回到初始位置，你知道为什么吗？ - mmdwc

由于函数中存在“toggle”值。 Toggle意味着可以通过操作事件打开/关闭一个属性。您可以更改此值（我现在不记得如何禁用）。 我猜animate()函数中没有像“margin”这样的参数。您可以阅读一些相关文档来了解它。 - AloneInTheDark

Answer 2

你可以尝试这个。

var pixels=0;
$(function() {
    $('#next_nav').click(function () {
       pixels=pixels-10;      
       $( "#nav" ).css('margin-left',pixels);
    });
});

这里提供了可运行的代码片段。

- Naveed Yousaf

Answer 3

检查jsFiddle。

   $(document).ready(function (){
       $("#next_nav").on("click", function() {
          var $left = $("#nav").css('margin-left');
          var $newval = (parseInt($left) - 10) + "px";
          $("#nav").css ({
            'margin-left' : $newval
          });
       });
   });

- Jaykumar Patel

Answer 4

$(function() {
  var count=0;
  $('#next_nav').click(function () {
  count-=10;

$( "#nav" ).css('margin-left',count);
});
});

并且包含jQuery

- Pratik Joshi

Answer 5

试试这个：

$(function() {
$('#next_nav').click(function () {
  marginleft=parseInt($( "#nav" ).css('margin-left').replace('px',''));
  $( "#nav" ).css('margin-left',marginleft-10+'px');
});
});

工作的Fiddle

- Milind Anantwar

Answer 6

修复了你的问题: 更新版本 编辑 .css('margin-left','-10px'); 为 .css({'margin-left' : '-10px'});

- Paradoxis

Answer 7

只需更改此处的$( "#nav" ).css('margin-left','-=10px');

- Krishna M