簡單的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滑塊效果

回答

相關問題