<!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. Django-权限信息中间件操作

    # 在当前app下新建一个middleware的文件夹,然后就可以尽情的写中间件了,只能是这个名字,切记~@!import re from django.shortcuts import redire ...

  2. java涉及父子类的异常

    java中的异常涉及到父子类的问题,可以归纳为一句话:子类的构造函数抛出的异常必须包含父类的异常,子类的方法可以选择抛出“范围小于等于”父类的异常或不抛出异常. 1. 为什么构造函数必须抛出包含父类的 ...

  3. hdu 4858 项目管理(vector模拟)

    # include <stdio.h> # include <algorithm> # include <string.h> # include <vecto ...

  4. WPF 之Converter

    WPF  之Converter Leo 在我们做项目的时候,经常会遇见这样的事情: 在数据中我们定义的是true,false 而在现实的时候则可能要求男,女 我们还得能定义成了0,1,2,3,4,5, ...

  5. 蒟蒻的HNOI2017滚粗记

    蒟蒻的第一次省选,然而并没有RP爆发... Day 1: 8:00开考,(然而密码错误是什么鬼).跌跌撞撞,8:40终于拿到纸质试题. { T1:作为一名没有学过Splay的蒟蒻,考场上真的被出题人感 ...

  6. 安装程序工具 (Installutil.exe)

    网址:https://msdn.microsoft.com/zh-cn/library/50614e95(VS.80).aspx  安装程序工具 (Installutil.exe) .NET Fram ...

  7. Eclipse慢慢学会的快捷键

    Java编辑器 添加单个import Ctrl+Shift+M Java编辑器 组织多个import Ctrl+Shift+O Ctrl+M切换窗口的大小 Ctrl+D删除当前行 ---------- ...

  8. （转）Vim十大必备插件

    原文地址:http://www.open-open.com/lib/view/open1414227253419.html Vim十大必备插件 Taglist taglist是一个用于显示定位程序中各 ...

  9. [Selenium] 使用Firefox Driver 示例

    //导入Selenium 库和FirefoxDriver 库 package com.learningselenium.simplewebdriver; import org.openqa.selen ...

  10. poj1830开关问题——异或高斯消元

    题目:http://poj.org/problem?id=1830 根据题意,构造出n元方程组: a(1,1)x1 ^ a(1,2)x2 ^ a(1,3)x3 ... a(1,n)xn = st1 ^ ...