jquery - 最核心的简单 jquery slider 效果

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 上的按钮(已编程)时，slave div 上的内容才会通过 ajax 更新，成功时(ajax 调用完成并且 div 从属更新)我希望 Master div 滑动到左侧，而从属 div 也滑动。

在第一个状态下，用户只能看到Master div，slave是不可见的，当按下按钮时，master slide向左滑动，Slave滑动占据原来的master位置(只是一个简单的 slider )。正如我所说，我已经对 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“剪辑”属性，添加一个额外的容器 div [使剪辑工作] 并通过稍微修改您的 fiddle 代码以依赖 animate 而不是 fadeIn 和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/