简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

jquery果冻抖动效果实现方法

来源:易贤网   阅读:673 次  日期:2015-03-30 14:38:25

温馨提示:易贤网小编为您整理了“jquery果冻抖动效果实现方法”,方便广大网友查阅!

这篇文章主要介绍了jquery果冻抖动效果实现方法,涉及animate方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jquery果冻抖动效果实现方法。分享给大家供大家参考。

具体实现方法如下:

代码如下:

<html>

<head>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

$(function(){

$("div").mouseover(function(){

$(this).animate({"width":"320","height":"100"},100);

$(this).animate({"width":"310","height":"90"},100);

}).mouseout(function(){

$(this).animate({"width":"300","height":"80"},100);

});

});

</script>

<style type="text/css">

div{width:300px;height:80px;border-radius:8px;background:green;margin-top:10px;}

</style>

</head>

<body style="background-color:#e8e8e8;">

<div></div>

<div></div>

<div></div>

<div></div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

更多信息请查看IT技术专栏

更多信息请查看脚本栏目
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:js实现遮罩层弹出框的方法
下一篇:jquery中show()、hide()和toggle()用法实例
易贤网手机网站地址:jquery果冻抖动效果实现方法
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!