gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 00:28:17 26 4
gpt4 key购买 nike

尝试将 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 h3slideRight 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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com