个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
尝试将 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 for h3，slideRight for p(说明)和slide <.info 的 em>从下到上。在 Chrome 上它运行完美但不适用于 Mozila firefox。默认情况下，此 slider 具有淡入淡出过渡，因此它在 Firefox 上显示淡入淡出过渡，而我的 bounceInLeft/bounceInRight 关键帧仅适用于 Chrome、Opera。
我的问题是如何通过 jQuery 做到这一点:
请看这个Fiddle >> 在最新的 Chrome 和 Mozila Firefox 35.0.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
关于javascript - 向左/右/下不同方向滑动元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30598668/
26
4
0
我是一名优秀的程序员,十分优秀！