<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>鼠标放上去透明度和位移都变化</title>

	<style>

	    * {

	    	margin:0;

	    	padding:0;

	    }

       .dv1 {

       	 position: relative;

       	 left:0;

       	 top:200px;

       	 width:100px;

       	 height:300px;

       	 background-color: red;

       }

       .dv1 div {

       	width:300px;

       	height:300px;

       	position: absolute;

       	left:136px;

       	top:0;

       	background-color: orange;

       	opacity: 0;

       }

	</style>

</head>

<body>

	<div class='dv1'>

		<div></div>

	</div>

</body>

<script src='http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js'></script>

<script>

//这个函数里面有个坑：$(".dv1 div") . stop()    要不然只要鼠标放上去几次，函数就执行几次，这是bug，所以务必要加上这句话

      $(document).ready(function(){

             $(".dv1").hover(function(){

                     $('.dv1 div').stop().animate({

                       left:"120px",

                       opacity: 1

                      })

             },function(){

                     $('.dv1 div').stop().animate({

                       left:"300px",

                       opacity: 0

                      })

             })

      })

</script>

</html>

　　

用jquery的animate动画函数做的网页效果的更多相关文章

  1. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  2. jquery的animate({})动画整理

    在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...

  3. 自定义jQuery的animate动画

    //擦除效果 jQuery.extend(jQuery.easing, { easeOutBack : function(x, t, b, c, d, s) { s = s || 1.3; retur ...

  4. jquery 停止animate动画，并且回复最初状态

    // 热门推荐悬浮效果 $("#recom_con li img").mouseenter(function(){ $(this).stop(true, true); $w = p ...

  5. jquery 温故而知新 animate动画的一些坑

    注意1,只有hover事件后才能紧跟着第二个回调函数(mouseleave),尽量还是不使用mouseover事件了 注意2,.stop(false,true); 结束动画,在动画队列中删除自己,并且 ...

  6. jquery的animate动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）

    1.jQuery中隐藏元素的hide方法   让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...

  8. 【总结整理】JQuery基础学习---动画

    jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...

  9. Jquery如何使用动画效果改变背景色

    Jquery如何使用动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只 ...

随机推荐

  1. centos7+php7 swoole 安装

    下载 swoole 首先下载swoole的源码包,这个操作很简单,没有太多说的. wget -c https://github.com/swoole/swoole-src/archive/v2.0.6 ...

  2. java线程阻塞（sleep,suspend,resume,yield,wait,notify）

    为了解决对共享存储区的访问冲突,Java 引入了同步机制,现在让我们来考察多个线程对共享资源的访问,显然同步机制已经不够了,因为在任意时刻所要求的资源不一定已经准备好了被访问,反过来,同一时刻准备好了 ...

  3. MySQL安装、安装时未提示输入密码、如何修改密码小结

    http://blog.csdn.net/fr555wlj/article/details/54971412

  4. Linux时间子系统之（一）：时间的基本概念【转】

    本文转载自:http://www.wowotech.net/timer_subsystem/time_concept.html 本文使用Q & A的方式来和大家以前探讨一下时间的基本概念 一. ...

  5. nginx、mysql、php等各编译参数查询

    查看nginx编译参数:/usr/local/nginx/sbin/nginx -V 查看apache编译参数:cat /usr/local/apache2/build/config.nice 查看m ...

  6. 【selenium】常见问题

    1鼠标变粗:setting→1.打开设置 点击 plugins 输入ideavim  把 这个勾去掉!这个是插件的配置问题.  2.editor->appearance  去掉 use bloc ...

  7. java中io类型及成熟io框架

    就io本身而言,概念上有5中模型:blocking I/O, nonblocking I/O, I/O multiplexing(select and poll), singal driven I/O ...

  8. 「LuoguP3865」 【模板】ST表 （线段树

    题目背景 这是一道ST表经典题——静态区间最大值 请注意最大数据时限只有0.8s,数据强度不低,请务必保证你的每次查询复杂度为 O(1) 题目描述 给定一个长度为 N 的数列,和 M 次询问,求出每一 ...

  9. 读取文件中的每行数据，并且存入到list中

    有一个txt文件,每行都有数据,将每行的数据转换成list列表 例如: 5,6,7,8,1 9,1,3,4 如下实现: f = open('test1.txt','r') for i in f.rea ...

  10. Python-day-9- RabbitMQ队列

    RabbitMQ队列 安装 http://www.rabbitmq.com/install-standalone-mac.html 安装python rabbitMQ module pip insta ...