jquery左右交叉滑动

你可以使用 jQuery 的 animate() 方法和 CSS 的 position 属性来实现左右交叉滑动的效果。以下是一个示例代码：

<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

#wrapper {
  position: relative;
  width: 600px;
  height: 400px;
}
#left, #right {
  position: absolute;
  top: 0;
  width: 300px;
  height: 100%;
  background-color: #ccc;
}
#left {
  left: 0;
}
#right {
  left: 300px;
}

$(document).ready(function(){
    var left = $('#left');
    var right = $('#right');
    left.click(function(){
        left.animate({left: '-300px'}, 'fast');
        right.animate({left: '0'}, 'fast');
    });
    right.click(function(){
        left.animate({left: '0'}, 'fast');
        right.animate({left: '300px'}, 'fast');
    });
});

在这个示例中，我们创建了一个包含两个 div 元素的容器 #wrapper，它们具有相同的高度，但是宽度各为 300 像素，分别位于容器的左侧和右侧。通过 CSS 的 position 属性，我们将它们的位置设置为绝对定位，并且它们的父元素 #wrapper 的位置设置为相对定位。

在 JavaScript 中，我们使用 jQuery 的 animate() 方法绑定了 click 事件到左侧和右侧的 div 元素上，当它们被点击时，它们会交叉滑动。具体来说，当左侧元素被点击时，它会向左滑动 300 像素，同时右侧元素会向左滑动 300 像素，从而交叉滑动；当右侧元素被点击时，它们会回到原始位置。你可以根据需要修改元素的 ID、宽度和滑动的距离。