最核心的简单jquery滑块效果答案

【问题标题】：Simple jquery slider effect from the very core最核心的简单jquery滑块效果
【发布时间】：2012-11-25 13:54:41
【问题描述】：

主要编辑：

这将有助于更好地解释问题，看看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 上的按钮（已经编程）时，从属 div 上的内容才会通过 ajax 更新，成功时（ajax 调用完成并且 div 从属已更新）我希望主 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);

【问题讨论】：

嗯，slideLeft?我很确定 jQuery 中不存在。
没错，有 slideDown 和 up，但解决方案类似于 slideLeft

标签： jquery css

【解决方案1】：

通过使用 css2 "clip" 属性，添加一个额外的容器 div [使剪辑工作] 并稍微修改你的小提琴代码以依赖 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/

【讨论】：

【解决方案2】：

如果没有看到您的代码很难说，但如果您能找出将元素放置在您想要的位置之前和之后的 CSS，您可以使用 jQuery animate function。您所要做的就是让它们处于初始位置，然后使用您希望它们进入的最终位置的参数对它们调用 animate 函数。jQuery 将负责其余的工作。例如，假设您需要将其移动到其原始位置左侧 400px 的位置，该位置的 margin-left 为 0px：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：