<!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. mac Git本地服务器配置

    本文转载至 http://blog.csdn.net/piziliweiguang/article/details/9311791   XCode 默认支持 Git 作为代码仓库,当我们新建一个仓库的 ...

  2. FFT用到的各种素数

    int MOD; inline int mul(int a, int b){ return (long long)a * b % MOD; } int power(int a, int b){ ; ) ...

  3. redis中键值对中值的各种类型

    1 value的最基本的数据类型是String 2 如果value是一张图片 先对图片进行base64编码成一个字符串,然后再保存到redis中,用的时候进行base64解码即可. 这是base64的 ...

  4. filter、servlet、interceptor的执行顺序

    1. Filter可认为是Servlet的一种“变种”,它主要用于对用户请求进行预处理,也可以对HttpServletResponse进行后处理,是个典型的处理链.它与Servlet的区别在于:它不能 ...

  5. 动态预览Xib的实现

    写一个TestView继承于UIView,然后写个对应的xib,把xib的名字设置成TestView,这是标准的用xib加载这个view必须得条件 然后xib里把这个View的backgroundCo ...

  6. 用 nodejs 写一个命令行工具 ：创建 react 组件的命令行工具

    用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具 前言 上周,同事抱怨说 react 怎么不能像 angular 那样,使用命令行工具来生成一个组件.对呀,平时工作时,想要创建 ...

  7. POJ2253 Frogger —— 最短路变形

    题目链接:http://poj.org/problem?id=2253 Frogger Time Limit: 1000MS   Memory Limit: 65536K Total Submissi ...

  8. Oracle：ORA-00214

    现场数据库服务器突然断电,启动时,提示如下现象: sql>sqlplus / as sysdba sql>startup ORA-00214: controlfile 'E:\oracle ...

  9. [Codeforces 914D] Bash and a Tough Math Puzzle

    [题目链接] https://codeforces.com/contest/914/problem/D [算法] 显然 , 当一个区间[l , r]中为d倍数的数的个数 <= 1 , 答案为Ye ...

  10. 微信小程序 WXML、WXSS 和JS介绍及详解

    前几天折腾了下.然后列出一些实验结果,供大家参考. 百牛信息技术bainiu.ltd整理发布于博客园 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML( ...