用jquery的animate动画函数做的网页效果
<!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动画函数做的网页效果的更多相关文章
- jQuery中animate动画第二次点击事件没反应
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...
- jquery的animate({})动画整理
在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...
- 自定义jQuery的animate动画
//擦除效果 jQuery.extend(jQuery.easing, { easeOutBack : function(x, t, b, c, d, s) { s = s || 1.3; retur ...
- jquery 停止animate动画，并且回复最初状态
// 热门推荐悬浮效果 $("#recom_con li img").mouseenter(function(){ $(this).stop(true, true); $w = p ...
- jquery 温故而知新 animate动画的一些坑
注意1,只有hover事件后才能紧跟着第二个回调函数(mouseleave),尽量还是不使用mouseover事件了 注意2,.stop(false,true); 结束动画,在动画队列中删除自己,并且 ...
- jquery的animate动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）
1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...
- 【总结整理】JQuery基础学习---动画
jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...
- Jquery如何使用动画效果改变背景色
Jquery如何使用动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只 ...
随机推荐
- C++类中static修饰的函数的使用
//在C++中应该养成习惯:只用静态成员函数引用静态成员数据,而不引用非静态成员数据 #include <iostream>using namespace std;class st_inf ...
- 手把手编写自己的PHPMVC框架
1 什么是MVC MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller ...
- A toolbox to build your own build server
A toolbox to build your own build server LambdaCD - Build Pipelines as Code https://www.lambda.cd/ A ...
- JAVA中Stack和Heap的区别
http://m.blog.csdn.net/wl_ldy/article/details/5935528
- To verify Hadoop releases using GPG
To verify Hadoop releases using GPG http://hadoop.apache.org/releases.html To verify Hadoop releases ...
- Struts2的工作原理（图解）详解
Struts2的工作原理 上图来源于Struts2官方站点,是Struts 2 的整体结构. 一个请求在Struts2框架中的处理大概分为以下几个步骤(可查看源码:https://github.com ...
- 用Qt编写的计算文件MD5值的Demo
Dialog.ui <?xml version="1.0" encoding="UTF-8"?> <ui version="4.0& ...
- java中创建对象的五种方法
用最简单的描述来区分new关键字和newInstance()方法的区别:newInstance: 弱类型.低效率.只能调用无参构造.new: 强类型.相对高效.能调用任何public构造. newIn ...
- spring cloud-服务注册
正常的服务模块,注册到注册中心,让别的服务发现,调用服务 创建“服务提供方” 下面我们创建提供服务的客户端,并向服务注册中心注册自己. 假设我们有一个提供计算功能的微服务模块,我们实现一个RESTfu ...
- (C)strcpy ,strncpy与strlcpy
1. 背景 好多人已经知道利用strncpy替代strcpy来防止缓冲区越界. 但是如果还要考虑运行效率的话,也许strlcpy是一个更好的方式. 2. strcpy strcpy 是依据 /0 作为 ...