<!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. 2016-1-8 windows 7下安装mysql及其配置和运用

    绪言 最近学习了一下mysql的相关用法,以及vs2010结合mysql的使用. 遇到的问题:1.安装mysql 5.6 绿色免安装版本,出现mysql server not connect loca ...

  2. chrome自带的调试工具

    由于项目需要加载webgl对浏览器内存压力很大,需要优化内存,网上找了一下资料,极力推荐chrome的开发文档 https://developers.google.cn/web/tools/chrom ...

  3. linux下提示command not found

    首先就要考虑root 的$PATH里是否已经包含了这些环境变量. 主要是这四个:/bin ,/usr/bin,/sbin,/usr/sbin. 四个主要存放的东东: ./bin: bin为binary ...

  4. 【bzoj3175】[Tjoi2013]攻击装置

    每两个能互相攻击且能放置的点连一条双向边,然后跑二分图最大点独立集即可 #include<algorithm> #include<iostream> #include<c ...

  5. InspectIT_EUM 实现原理概述

    在Git上查看 InspectIT 实现原理概述: 实现原理详解:  1.jsAgent如何注入到浏览器 通过ASM框架修改HttpService.service()方法,加入相关逻辑,对每一个Htt ...

  6. Java客户端：调用EyeKey HTTP接口进行人脸对比

    package com.example.buyishi; import java.io.BufferedReader; import java.io.IOException; import java. ...

  7. C++使用模板、函数指针、接口和lambda表达式这四种方法做回调函数的区别比较

    在C++中,两个类之间存在一种关系,某个类需要另外一个类去完成某一个功能,完成了之后需要告知该类结果,这种最普通最常见的需求,往往使用回调函数来解决. 如题,我总结下来有这么四种方式可以完成这项功能, ...

  8. Spark高级

    Spark源码分析: https://yq.aliyun.com/articles/28400?utm_campaign=wenzhang&utm_medium=article&utm ...

  9. Kafka在Windows安装运行

    摘要:本文主要说明了如何在Windows安装运行Kafka 一.安装JDK 过程比较简单,这里不做说明. 最后打开cmd输入如下内容,表示安装成功 二.安装zooeleeper 下载安装包:http: ...

  10. 编译android内核和文件系统，已经安装jdk，提示build/core/config.mk:268: *** Error: could not find jdk tools.jar

    1:确保安装jdk,如果没有安装请移布:http://www.cnblogs.com/jiuyueguang/p/3156621.html 2:如果已经安装了jdk,还是提示此错误, 解决方法 请确保 ...