jquerydiv左右滑动

### 使用 jQuery 实现 DIV 元素左右滑动动画

为了实现一个平滑的左右滑动效果，可以利用 `animate()` 方法调整元素的位置属性。下面的例子展示了如何通过点击按钮使一个 DIV 元素向左或向右移动。

#### HTML 结构
首先定义基本的HTML结构，包括两个按钮用于触发不同的方向动作以及目标DIV容器：

<button id="slideLeft">Slide Left</button>
<button id="slideRight">Slide Right</button>

<div id="slidingDiv" style="width:100px;height:100px;background:red;position:absolute;"></div>

#### JavaScript (jQuery) 编码
接着，在文档加载完成后设置事件监听器给这两个按钮，并在每次点击时改变`#slidingDiv` 的位置[^2]。

$(document).ready(function(){
    var position = 0;
    
    $("#slideLeft").click(function(){
        position -= 50; // 向左移50像素
        $('#slidingDiv').stop().animate({
            left: position + "px"
        }, 'slow');
    });

    $("#slideRight").click(function(){
        position += 50; // 向右移50像素
        $('#slidingDiv').stop().animate({
            left: position + "px"
        }, 'slow');
    });
});

在这个例子中，每当用户点击相应的按钮时，都会更新变量 `position` 来记录当前水平位移量，并调用 `.animate()` 函数让 `#slidingDiv` 平滑过渡到新的坐标位置。这里还加入了`.stop()` 方法防止多个连续快速点击造成动画积压排队现象[^1]。