Javascript 在左/右/底部的不同方向滑动元素_Javascript_Jquery_Css_Firefox_Slide

Javascript 在左/右/底部的不同方向滑动元素

javascript jquery css firefox

Javascript 在左/右/底部的不同方向滑动元素,javascript,jquery,css,firefox,slide,Javascript,Jquery,Css,Firefox,Slide,尝试将h3向左滑动，p向右滑动，.info从下到上滑动。实际上，它在没有jQuery的Chrome和Opera中工作得很好，因为我使用了Animate.css，但在Mozila firefox 35.0.1+中不起作用。所以我必须通过jqueryforfirefox来完成 HTML: 西塞罗著名的演讲是反对他的信息 SEO友好的平面样式自定义字体信息想要为h3实现三种类型的效果slideLeft，slideRight为p（说明），并为.info从下到上滑动。在Chrome上

尝试将

h3

向左滑动，

向右滑动，

.info

从下到上滑动。实际上，它在没有jQuery的Chrome和Opera中工作得很好，因为我使用了Animate.css，但在Mozila firefox 35.0.1+中不起作用。所以我必须通过jqueryforfirefox来完成

HTML:




西塞罗著名的演讲是反对他的
信息


SEO友好的平面样式自定义字体
信息

想要为

h3

实现三种类型的效果

slideLeft

，

slideRight

为

（说明），并为

.info

从下到上滑动。在Chrome上，它工作得很好，但在Mozila firefox上却不行。默认情况下，此滑块具有淡入淡出过渡，因此它在firefox上显示淡入淡出过渡，而我的bounceInLeft/bounceInRight关键帧仅在Chrome、Opera上工作

我的问题是jQuery如何做到这一点：

请在最新的Chrome和Mozila Firefox 35.0.1+上查看此>>。谢谢。

要获得正确的幻灯片效果，请使用此选项。
$（文档）.ready（函数（）{
$（“.btn1”）。单击（函数（）{
$（“p”）.animate（{右：+=100px}）；
});
$（“.btn2”）。单击（函数（）{
$（“p”）.animate（{右：“0”}）；
});
});
使有生气
重置
这是一个段落
您可以在这里查看不同的jquery效果。
http://www.w3schools.com/jquery/eff_animate.asp

要测试这是否是一个前缀问题，我建议添加并查看是否存在此问题persists@Professor.CSS谢谢，我已经测试过了，仍然没有工作。还有其他建议吗？小提琴：

<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>

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