jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置

要实现元素的left增加N像素，鼠标移开会慢慢的移动到原来的位置，可以使用jquery的animate()方法。下面是具体实现的步骤：

1. 首先，在HTML结构中给要移动的元素添加一个唯一的id，方便调用。

2. 在CSS样式中设置该元素的初始位置left，同时将该元素的position属性设置为absolute或fixed（相对定位的元素无法使用left属性）。

3. 在javascript中使用jquery获取该元素，并且在鼠标移入事件中使用animate()方法将left属性增加N像素，并且设置动画持续时间和缓动效果。

4. 在鼠标移出事件中也使用animate()方法，将left属性恢复到初始位置，并且设置动画持续时间和缓动效果，这里需要使用jquery的回调函数来实现恢复到初始位置之后执行的操作。

示例1:

HTML代码：

<div id="box">Hello World</div>

CSS代码：

#box {
    position: absolute;
    left: 0;
}

JavaScript代码：

$(function() {
    var $box = $("#box");
    var originalLeft = $box.position().left;
    var newLeft = originalLeft + 50;

    $box.mouseenter(function() {
        $box.stop().animate({left: newLeft}, 500, "easeInOutQuad");
    });

    $box.mouseleave(function() {
        $box.stop().animate({left: originalLeft}, 500, "easeInOutQuad", function() {
            // 恢复到初始位置之后执行的操作
        });
    });
});

在这个示例中，我们将元素的left增加了50像素，并且使用了jquery的stop()方法，确保在多次触发鼠标移入事件时，动画不会累加，而是从当前位置开始重新开启动画。

示例2：

HTML代码：

<div id="box">Hello World</div>

CSS代码：

#box {
    position: fixed;
    left: 0;
}

JavaScript代码：

$(function() {
    var $box = $("#box");
    var originalLeft = $box.position().left;
    var newLeft = originalLeft + 50;

    $box.mouseenter(function() {
        $box.animate({left: newLeft}, 500, "easeInOutQuad");
    });

    $box.mouseleave(function() {
        $box.animate({left: originalLeft}, 500, "easeInOutQuad");
    });
});

在这个示例中，我们将元素的position属性设置为fixed，使得元素相对于浏览器窗口固定位置显示，并且不会随着页面滚动而移动。其他实现方式和示例1类似。