滑动元素在不同方向左/右/底部
滑动元素在不同方向左/右/底部
提问于 2015-06-02 14:17:29
尝试向左滑动h3，向右滑动p，在此滑块上从下到顶方向滑动.info。实际上，它在没有jQuery的Chrome和Opera中运行得很好，因为我使用过Animate.css，但它在Mozila 35.0.1+中不起作用。所以我必须用jQuery为火狐做这件事。
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>希望为h3实现三种类型的效果h3，为p实现slideRight (描述)，并为.info实现自下而上的幻灯片。在Chrome上，它工作得很完美，但在Mozila上却不能工作。默认情况下，这个Slider有淡入过渡，因此它显示了firefox上的淡出转换，而我的B儿SECLeft/b儿GEInRight关键帧只在Chrome、Opera上工作。
我的问题是如何通过jQuery做到这一点：
请在最新的Chrome和Mozila 35.0.1+上看到这个小提琴 >>。谢谢。
回答 1
Stack Overflow用户
发布于 2015-09-09 06:15:12
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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30598668
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号