简单的jQuery滑块效果

这将有助于解释这个问题比较好，一起来看看的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>

上的从格的内容被通过AJAX更新，只有当一个按钮坐上主DIV（已经录制），按，成功（Ajax调用完成和股利从更新）我想法师div滑动到左侧，同时从机div也滑动。

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

我不想使用任何existant jquery插件或html5或css3（如果可能），只是想保持简单，但再次，即时通讯不是很好的前端开发和搞清楚的CSS来得到这个权利是驾驶我疯。谢谢你的帮助！

编辑当我说我的意思slideLeft：

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

来源

2012-11-24 DomingoSL

嗯，'slideLeft'？我敢肯定，这在jQuery中不存在。 – elclanrs

你说得对，有slideDown和up，但解决方案将像slideLeft – DomingoSL

通过使用CSS2“夹”属性，增加一个额外的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/

来源

2012-11-25 05:54:41 extramaster

很难没有看到你的代码的说法，但如果你能弄清楚，把你的元素的CSS您想要的地方，前后之后，您可以使用jQuery animate function。所有你需要做的就是让它们处于初始位置，然后用你想要的最终位置的参数调用它们的动画函数。jQuery将负责其余的部分。例如，假设您需要400像素将它移动到原来的位置的左边其中有中0像素保证金左：

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

来源

2012-11-24 21:42:21 jrbalsano

不知道，如果你想向左移动，或当你说“幻灯片”你意思就像在slideUp（）和slideDown（）中一样。如果你指的是后者

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

来源

2012-11-24 21:44:27 Popnoodles

简单的jQuery滑块效果

回答

相关问题