<!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. Linux环境下如何查找哪个线程使用CPU最长

    top -H -p pid 查看端口是否被占用: netstat -apn|grep 80

  2. openwrt hotplug

    由内核发出 event 事件. kobject_uevent() 产生 uevent 事件(lib/kobject_uevent.c 中), 产生的 uevent 先由 netlink_broadca ...

  3. 基于ADB框架Robotium跨进程操作

    转自:http://blog.csdn.net/qingchunjun/article/details/42580937 2015年2月3日更新: 有些朋友在用真机尝试本方法时,抛出了InputStr ...

  4. JSP复习笔记

    1.注释 <!--这个注释会显示在HTML源码中--> <%--隐藏注释,不会显示在HTML源码中--%> 2.声明 <%! java声明 声明变量,方法等 %> ...

  5. Ruby中任务构建工具rake的入门学习教程

    参考:http://www.jb51.net/article/81476.htm Rake简介 Rake的意思是Ruby Make,一个用ruby开发的代码构建工具. 但是,为什么Ruby需要Rake ...

  6. timestamp 转 date 处理后再转timestamp

    package com.jmu.ccjoin.service.impl; import java.sql.Timestamp;import java.util.Calendar;import java ...

  7. 解决IE浏览器部分版本不支持background-size属性问题

    background-size是CSS3新增的属性,现在有很多浏览器都支持CSS3了.但是IE浏览器有些版本还是不支持,比如IE8,IE9也有些CSS3的属性会支持,但是有些也不支持.在这里就了解一下 ...

  8. 解决post乱码之web.xml

    <!-- 解决post乱码 --> <filter> <filter-name>characterEncodingFilter</filter-name> ...

  9. 使用Pycharm官方统计代码行插件统计代码总行数

    最近有需求,需要统计项目代码的总行数,首先想到了使用Pycharm官方的统计行数插件,发现效果还不错. 官方代码统计插件指导:https://plugins.jetbrains.com/plugin/ ...

  10. CMake命令之list

    用途:提供一些列表操作 list(LENGTH <list><output variable>)  list(GET <list> <elementindex ...