jquery - 最核心的简单jquery滑块效果

Question

---

主要编辑：

这将有助于更好地解释问题，看看这个，如您所见，两张幻灯片使用淡入淡出效果进行更改，如何更改此效果以实现向左滑动的效果，就像您在树探索中看到的那样在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 从属已更新），从属 div 上的内容才通过 ajax 更新我希望主 div 向左滑动，而从属 div 也滑动。

在第一种状态下，用户只能看到 Master div，slave 是不可见的，当按下按钮时，master 滑动到左侧，Slave 滑动到原来的 master 位置（只是一个简单的滑块）。正如我所说，我已经在 jquery 和服务器端代码（php + ajax）上编写了所有基本交互，但我不知道如何设置 css 以实现这一点，因为我使用简单的动画$('#div').slideLeft(400);

我不想使用任何现有的 jquery 插件或 html5 或 css3（如果可能的话），只是想保持简单，但同样，我不是很好的前端开发人员，并且弄清楚 css 来做到这一点让我发疯了。谢谢你的帮助！

编辑 当我说slideLeft时，我的意思是：

$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);

Answer 1

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

HTML：

<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>

JS：

 $(document).ready(function() {

$('div.table-coupons').css({opacity:0,marginLeft:200});

     calltable();
        function calltable()    {
$('div.table-coupons').css('display','block');
$('div.table-cont').css('display','block');

            $('div.table-coupons').animate({opacity:0,marginLeft:200},{ duration: 300, queue: false,complete:function(){$(this).css('display', 'none')}});
            $('div.table-cont').html('HELLO World! <a href="#" class="coupon_link">Next</a>');
            $('div.table-cont').animate({opacity:1,marginLeft:0},{ duration: 300, queue: false });
            $('a.coupon_link').click(function() { next_slide(); });
        }
        function next_slide() {
$('div.table-coupons').css('display','block');
$('div.table-cont').css('display','block');

            $('div.table-cont').animate({opacity:0,marginLeft:-200},{ duration: 300, queue: false, complete:function(){$(this).css('display', 'none')}});
            $('div.table-coupons').html('HELLO again! <a href="#" class="back_link">Back</a>');
            $('div.table-coupons').animate({opacity:1,marginLeft:0},{ duration: 300, queue: false });
            $('a.back_link').click(function() { back_slide(); });            
        } 
        function back_slide() {    
            calltable();            
        }            

 });

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

Answer 2

不确定您是否要向左移动，或者当您说“滑动”时，您的意思是在 slideUp() 和 slideDown() 中。如果你说的是后者

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

Answer 3