用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动画效果只 ...
随机推荐
- LVM+NBD实现VM数据备份和迁移
在云系统的高可用性中,VM层的高可用性尤为关键,其中又涉及到了VM本身数据的备份和迁移的问题.在现有的平台上,每一个VM的数据放在一个单独的LV(逻辑卷)上,VM数据的备份可通过备份其所在的LV来完成 ...
- Spyder的汉化
我准备写下spyder的汉化问题:对于英文大佬,从来没得汉化问题,但是对于新手和英语差的来说,汉化还是有必要,至少用汉化过得软件能快速掌握软件等.后期会用软件了在慢慢习惯英文也不迟...哈哈哈哈.本文 ...
- error: expected '=', ',', ';', 'asm' or '__attribute__' before '{' token
头文件函数声明少了“:(分号)”
- http权威指南（一）-Http概述
Http概述 在Web中,不管是浏览器还是server都是通过Http相互通信的.那么Http是怎样工作的呢? 首先,client向server发送Http请求,server会在Http响应中回送所请 ...
- 苹果应用内支付(iOS IAP)的流程与常用攻击方式
1. 客户端直接verify苹果的receipt 如果verify成功 自行发放商品 2. 客户端将receipt传给server,由server进行验证并发放商品 按照安全性原则, 客户端的所有信息 ...
- Spring源码深度解析——笔记
1.spring容器的基本用法 xml配置 <bean id="myTestBean" class="bean.MyTestBean"/> 调用 B ...
- CentOS笔记-vim
详细的参考http://www.runoob.com/linux/linux-vim.html i插入 I 行首插入 A 行尾插入 fn + ←,行首 fn + →,行尾 fn + ↑,向上翻页 fn ...
- JSP复习笔记
1.注释 <!--这个注释会显示在HTML源码中--> <%--隐藏注释,不会显示在HTML源码中--%> 2.声明 <%! java声明 声明变量,方法等 %> ...
- BusyBox下ftpget的使用方法
在终端输入ftpget命令,可以得到以下帮助信息: BusyBox v1.17.4 (2010-12-22 10:59:18 CST) multi-call binary. Usage: ftpget ...
- Spring boot 使用Junt
//@RunWith:启动器,SpringJUnit4ClassRunner:Spring整合JUnit4 //@SpringBootTest获取启动类,相当于@Contextconfiguartio ...