Question

主编辑：

这将有助于更好地解释这个问题，看看this，你可以看到，两张幻灯片使用淡化效果进行了更改，如何更改此效果以滑动到左侧效果，如你在Github的树木探索中看到的那个？

图片两个div，一个叫Master，第二个是Slave。

<div id="container">
  <div id="master" style="background-color:#ABC;">1</div>
  <div id="slave" style="background-color:#CBA;">2</div>
</div>

只有当按钮按下主div（已经编程），成功（ajax调用完成并且div slave更新）时，slave div上的内容才会通过ajax更新我希望Master div滑动到当奴隶div也滑动时左边。

在第一个状态下，用户只能看到主div，奴隶是不可见的，当按下按钮时，主幻灯片向左移动，Slave滑动到ocupy原始主位置（只是一个简单的滑块）。正如我所说，我已经编写了jquery和服务器端代码（php + ajax）上的所有基本交互，但我不知道如何设置css以实现这一点，因为动画我使用简单的{{1 }}

我不想使用任何现有的jquery插件或html5或css3（如果可能的话），只是想保持简单，但再次，我不是很好的前端开发和搞清楚css来做到这一点正在驾驶我疯了。谢谢你的帮助！

修改我的意思是当我说slideLeft：

$('#div').slideLeft(400);

Answer 1

通过使用css2“clip”属性，添加一个额外的容器div [以使剪辑工作]并稍微修改您的小提琴代码以依赖animate而不是fadeIn和{{1这种效果是可能的。但是，解决方案并不像您希望的那样简单，也不是很干净。永远不会，它有效。

HTML：

fadeOut

JS：

<div style="position:relative;width:200px;height:100px;left:100px;">
    <div style="position:absolute;clip:rect(0px,200px,100px,0px);overflow:none;width:200px;height:100px">
    <div class="table-cont" style="display: none; position:absolute; background-color:#ABC;width:100%;height:100px;"></div>
    <div class="table-coupons" style="display: none; position:absolute;top: 0px; background-color:#CBA;width:100%;height:100px;"></div>
</div>
</div>

JSFiddle：http://jsfiddle.net/97pcj/1/

Answer 2

很难说没有看到你的代码，但是如果你能找到将你的元素放在你想要的地方之前和之后的CSS，你可以使用jQuery animate function。你所要做的就是让它们处于初始位置，然后使用你想要它们的最终位置参数调用它们上的animate函数.jQuery将负责其余部分。例如，假设您需要将其移动到原始位置左侧400px，其左边距为0px：

$("#div").animate({marginLeft: -400px});

Answer 3

不确定您是想向左移动还是当您在slideUp（）和slideDown（）中说出“幻灯片”时。如果你的意思是后者

$(this).animate({width:'toggle'},400);

简单的jquery滑块效果来自核心

3 个答案: