单击时 LI 的动画位置答案

【问题标题】：Animate position of LI when clicked单击时 LI 的动画位置
【发布时间】：2013-02-13 00:49:21
【问题描述】：

我确定我在这里遗漏了一些愚蠢的东西，但我看不到它。
应该发生的是，对于垂直列表，当单击 LI 时，它会向右移动 10 像素，如果单击另一个 LI，则它会向后移动，并且单击的 LI 向右移动。
这在列表中运行良好，但如果我回到前一个 LI，前一个选择的 LI 会按原样向后移动，但单击的 LI 没有动画，所以当你来回单击时，LI 会继续向后移动

$("#navig li").click(function(){
$("#navig li.selected").animate({ 
        left: "-=10px",
      }, 300 );
    $("#navig li.selected").removeClass("selected")

    $(this).addClass("selected")
    $(this).animate({ 
        right: "-=10px",
      }, 300 );
})

【问题讨论】：

你的点击事件在哪里？，js代码？
$("#navig li").click(function(){
总是调整left属性，不要混用left和right
知道了，应该是：“+=10”和正确的：“-=10”连续
charlietfl 你是对的，无论是左还是右，但交换 -/+ 但不能接受它作为答案

标签： jquery jquery-animate position html-lists

【解决方案1】：

如果您调整 left 的正负值，则对其他条件执行相反的操作，但要针对相同的位置属性 left。

【讨论】：

【解决方案2】：

你需要这样的东西吗？

http://jsfiddle.net/v3LWL

$("#navig li").click(function(){
    var $this  = $(this),
        el = $this.siblings().filter(".selected");

    el.animate({left: 0}, 300, function(){
        $(this).removeClass("selected");
    });

    $this.animate({left: 10}, 300, function(){
        $(this).addClass("selected");
    });

});

【讨论】：

我很好奇，将它作为 css 的一部分会更好吗？
如果你不关心不支持过渡的IE7/Ie8，我会使用css方式
谢谢。我玩了一下，但不喜欢等待 LI 上的绿色背景出现的美学，我认为仅为动画添加一个单独的类只会做更多的工作。