Question

尝试将h3向左方向滑动，p向右方向滑动.info向下方向slider向上滑动方向。实际上它在没有jQuery的情况下在 Chrome和Opera 中完美运行，因为我使用过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，为{{实现从下到上 1}}。在Chrome上，它的工作完美但不适用于Mozila firefox。这个Slider默认情况下有淡入淡出过渡，所以它在firefox上显示淡入淡出过渡，而我的bounceInLeft / bounceInRight关键帧仅适用于Chrome，Opera。

我的问题是如何通过jQuery执行此操作：

请参阅此Fiddle＆gt;＆gt;在最新的Chrome和Mozila Firefox 35.0.1+上。感谢。

Answer 1

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

向左/向右/向下滑动不同方向的元素

1 个答案: