如何用jquery做一个div向右滑动,先加速,再减速,最后回弹一下的效果?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何用jquery做一个div向右滑动,先加速,再减速,最后回弹一下的效果?相关的知识,希望对你有一定的参考价值。

如何用jquery做一个div向右滑动,先加速,再减速,最后回弹一下的效果?

参考技术A $("#div").click(function()

$("#div").animate('margin-left':'100px','fast');
$("#div").animate('margin-left':'+=100px','slow');
$("#div").animate('margin-left':'0px','slow');
);

这样子写就能实现你要的功能的了,具体移动多少,怎么移动,你调一下动画的数据就行了
参考技术B 用animate 和 循环 放在一起可以解决。循环来控制aniamte的时间。 参考技术C 用easing.js这个jquery插件有你要的效果本回答被提问者采纳

如何用js实现,点击后,改变一个css

方法步骤:

    先获取要改变css的元素。

    改变这个元素的style属性。

    eg:下面是改变div的背景色,改为蓝色。

    <style>

    divwidth:200px;height:200px;background:#f00;

    </style>

    <div>改变背景色</div>

    <script>

    var div = document.getElementsByTagName("div");

    div.style.background = "blue";

    </script>


参考技术A 有三种方法:直接改变样式、改变className和改变cssText

改变className: document.getElementById('obj').className="…"

改变cssText:document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;";

改变直接样式: document.getElementById('obj').style.backgroundColor="#003366″
参考技术B <style>.color1color:red;.color2color:black;</style>

<script type="text/javascript" src="/jquery-1.9.1.min.js"></script>
<div id="change" class="color1">我现在是红色</div>
<a href="#" onclick="change();"/>点击我会把文字变成黑色</a>

<script>
function change()   
    $("#change").attr("color1","color2");//改变class    

</script>

参考技术C 你只要把超链接鼠标经过属性的颜色改下就可以实现了 参考技术D js改变 class 就ok了

以上是关于如何用jquery做一个div向右滑动,先加速,再减速,最后回弹一下的效果?的主要内容,如果未能解决你的问题,请参考以下文章

用jquery让一个DIV元素向右滑动并快速淡出的语句咋写的?

如何用Jquery获取某一个Div的Class或者ID

jquery怎么实现手机触屏图片滑动代码,手向左或向右滑动,图片滑动。不滑动的时候图片自动循环滚动

如何用jquery实现点击div更换class?

如何用Jquery获取某一个Div的Class或者ID

如何用jQuery包装内容?