滑動元件左/右/底部

試圖幻燈片h3到左方向，p到正確的方向和.info下到上的方向上這slider。其實它在Chrome和Opera沒有jQuery完美工作，因爲我使用Animate.css，但它不工作在Mozila firefox 35.0.1 +。所以我必須通過jQuery for firefox來完成。滑動元件左/右/底部

HTML：

<div id="headslide"> 
<ul> 
<li class="post-content"> 
<div class="slidshow-thumbnail"> 
<a href="#"> 
<img src="http://3.bp.blogspot.com/-h4-nQvZ5-VE/VQ3HLtSS3ZI/AAAAAAAABIc/iaOda5zoUMw/s350-h260-c/girl_with_winter_hat-wallpaper-1024x768.jpg" height="260" width="350"/> 
</a> 
</div> 
<span class="content-margin"> 
<p>Cicero famously orated against his p...</p> 
<h3><a href="#">Download Premium Blogger Templates</a></h3> 
<span class="info">Info</span> 
</span> 
</li> 
<li class="post-content"> 
<div class="slidshow-thumbnail"> 
<a href="#"> 
<img src="http://3.bp.blogspot.com/-YfkF1u_VB40/VWr5dYf00gI/AAAAAAAABW8/wv2e-Lu4etw/s390-h340-c-h340-c/11071467_807062866056131_872486685669967339_n.jpg" height="260" width="350"/> 
</a> 
</div> 
<span class="content-margin"> 
<p>SEO friendly Flat style Custom Fonts.</p> 
<h3><a href="#">Modern with a pixel-perfect eye</a></h3> 
<span class="info">Info</span> 
</span> 
</li> 
</ul> 
<div class="pager"></div> 
</div>

要實現三種類型的效果slideLeft爲h3，slideRight爲p（介紹）和滑動底部到頂部爲.info。在Chrome上，它的工作完美，但不適用Mozila Firefox。此滑塊默認情況下會淡入淡出，所以它會在Firefox上顯示淡入淡出，我的bounceInLeft/bounceInRight關鍵幀僅在Chrome和Opera上可用。

我的問題是如何通過jQuery來做到這一點：

請參見本Fiddle >>在最新的Chrome和Firefox的Mozila 35.0.1+。謝謝。

來源

2015-06-02 Aariba

要測試如果這是一個前綴的問題，我建議增加[無前綴（http://cdnjs.com/libraries/prefixfree），看看問題是否依然存在 – jbutler483

@ Professor.CSS感謝，我已經測試過，仍然沒有工作。任何其他建議？小提琴：http://jsfiddle.net/bacec898/1/ – Aariba

For the right slide effect use this. 

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
$(".btn1").click(function(){ 
    $("p").animate({right: "+=100px"}); 
}); 
$(".btn2").click(function(){ 
    $("p").animate({right: "0"}); 
}); 
}); 
</script> 
</head> 
<body> 

<button class="btn1">Animate</button> 
<button class="btn2">Reset</button> 

<p style="position:absolute;right:0;">This is a paragraph.</p> 

</body> 

You can check here at W3Schools for different jquery effects. 

http://www.w3schools.com/jquery/eff_animate.asp

來源

2015-09-09 06:15:12 kfreeman04208

滑動元件左/右/底部

回答

相關問題