用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动画效果只 ...
随机推荐
- RecyclerView（替代ListView）使用方法介绍
在build.gradle文件加入以下代码 compile 'com.android.support:cardview-v7:21.0.3' compile 'com.android.support: ...
- ViewGroup如何分发事件
dispatchTouchEvent事件派发显示隧道方式.再是冒泡方式隧道方式传递,直道某一个元素消耗此事件,由上至下逐层分发视图.冒泡方式传递,当某个视图消耗事件后其return boolean 是 ...
- AndroidCityPicker仿IOS选择效果
近期的一个项目由于android端与IOS端须要同步,所以在城市选择器这里做了一个相似IOS的CityPicker控件,当然由于本人水平问题显示效果比IOS上面还是有一定差距的.OK先让大家看下效果. ...
- 回溯法——求解N皇后问题
问题描写叙述 八皇后问题是十九世纪著名数学家高斯于1850年提出的.问题是:在8*8的棋盘上摆放8个皇后.使其不能互相攻击,即随意的两个皇后不能处在允许行.同一列,或允许斜线上. 能够把八皇后问题拓展 ...
- HTML5 and Websocket
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...
- rails使用mysql数据库
简单步骤 1,安装mysql 安裝 MySQL Ubuntu 上安裝 MySQL 請執行: $ sudo apt-get install mysql-server mysql-common mysql ...
- iOS中区分照片的来源
原理就是通过枚举出每个assets group,然后取得group property,group property是个整数,对应头文件中的一些枚举值.用这个可以判断照片是从哪来的(相机胶卷.照片流.相 ...
- Android多国语言文件夹汇总
Arabic, Egypt (ar-rEG) —————————–阿拉伯语,埃及 Arabic, Israel (ar-rIL) ——————————-阿拉伯语,以色列 Bulgarian, Bulg ...
- LA-2678 (尺取法)
题意: 在一个长度为n的序列中,找到最短的长度序列,使其和大于等于s; 思路: two pointer ,水题; Ac代码: #include <bits/stdc++.h> /* #in ...
- servlet的<url-pattern>
① 完全匹配 <url-pattern>/test/list.do</url-pattern> ② 路径匹配 <url-pattern>/*</url-pat ...