Элементы слайдов в разных направлениях влево/вправо/внизу

Пытается сдвинуть h3 влево, p вправо и .info внизу в верхнее направление на этом slider. На самом деле он отлично работает в Chrome и Opera без jQuery, потому что я использовал Animate.css, но он не работает в Mozilla firefox 35.0.1+. Поэтому я должен сделать это с помощью jQuery для 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 он отлично работает, но не работает над Mozilla firefox. По умолчанию этот слайдер имеет переход на постепенный переход, поэтому он показывает переход на fade на 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

Элементы слайдов в разных направлениях влево/вправо/внизу

ответ

Смежные вопросы