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程序设计有所帮助。

   
时间: 2024-09-18 17:22:36

jquery果冻抖动效果实现方法的相关文章

jquery果冻抖动效果实现方法_jquery

本文实例讲述了jquery果冻抖动效果实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript">  $(function(){   $("

jQuery通过扩展实现抖动效果的方法

 这篇文章主要介绍了jQuery通过扩展实现抖动效果的方法,涉及jQuery扩展的技巧及抖动特效的实现方法,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery通过扩展实现抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 1. JavaScript代码如下: 代码如下: jQuery.fn.shake = function(intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDur

jQuery通过扩展实现抖动效果的方法_jquery

本文实例讲述了jQuery通过扩展实现抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 1. JavaScript代码如下:     复制代码 代码如下: jQuery.fn.shake = function(intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) {     this.each(function() {         var jqNod

jquery搜索框效果实现方法

 这篇文章主要介绍了jquery搜索框效果实现方法,分析了jquery搜索框效果的实现技巧及注意事项,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery搜索框效果实现方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <title>jquery:搜索框效果</title> <script type="text/javascript" src="jquery

jquery实现聚光灯效果的方法

 这篇文章主要介绍了jquery实现聚光灯效果的方法,可实现鼠标滑过图片时显示当前图片高亮,其他图片变暗的聚光灯效果,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了jquery实现聚光灯效果的方法.分享给大家供大家参考.具体分析如下: 有时网站需要用jquery实现一种图片聚光灯特效,当鼠标滑过单组中的单个图标时,当前高亮,其它图标变暗的这种类似图片聚光灯特效.其实现原理为首先先让鼠标触及到当前图片后,让其他图片全部透明化,然后显示出当前的提示语,当鼠标移开以后隐藏当前的提示语,

Android编程实现仿iphone抖动效果的方法(附源码)_Android

本文实例讲述了Android编程实现仿iphone抖动效果的方法.分享给大家供大家参考,具体如下: 布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" and

js实现鼠标触发图片抖动效果的方法_javascript技巧

本文实例讲述了js实现鼠标触发图片抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>鼠标触发图片抖动效果</title> <style> .shakeimage{ position:relative } </style> <script language="JavaScript1.2"> //configure shake degr

jquery搜索框效果实现方法_jquery

本文实例讲述了jquery搜索框效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jquery:搜索框效果</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascri

jquery实现聚光灯效果的方法_jquery

本文实例讲述了jquery实现聚光灯效果的方法.分享给大家供大家参考.具体分析如下: 有时网站需要用jquery实现一种图片聚光灯特效,当鼠标滑过单组中的单个图标时,当前高亮,其它图标变暗的这种类似图片聚光灯特效.其实现原理为首先先让鼠标触及到当前图片后,让其他图片全部透明化,然后显示出当前的提示语,当鼠标移开以后隐藏当前的提示语,让所有的背景颜色的透明度变回正常.这里就来介绍如何用jquery实现聚光灯效果 jquery实现聚光灯效果图如下所示: jquery代码 复制代码 代码如下: <!D