用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动画效果只 ...
随机推荐
- java内部类的一些看法
java内部类, 我在看<thinking in java>的时候总感觉模棱两可的, 挣扎了好几天之后, 感觉有一部分的问题想的清楚了, 写一个随笔记录一下, 以备以后修改和查看 什么是内 ...
- node.js内存泄露问题记录
先说一下.事情的来龙去脉. 公司开发一款游戏棋牌游戏,服务端的开发是IO密集型,开发的时候,考虑过使用python,java,node.js. 终于选择了node.js(node.js宣传的杀手功能. ...
- Android IntentService的使用和源代码分析
引言 Service服务是Android四大组件之中的一个,在Android中有着举足重轻的作用.Service服务是工作的UI线程中,当你的应用须要下载一个文件或者播放音乐等长期处于后台工作而有没有 ...
- mysql----其他小技巧
小技巧: min/max优化 在表中,一般都是经过优化的. 如下地区表 id area pid 1 中国 0 2 北京 1 ... 3115 3113 我们查min(id), id是主键,查Min(i ...
- react native 之页面跳转
第一章 跳转的实现 1.component 中添加这行代码 <View style={styles.loginmain}> <Text style={styles.loginte ...
- codeforces 459 A. Pashmak and Garden 解题报告
题目链接:http://codeforces.com/problemset/problem/459/A 题目意思:给出两个点的坐标你,问能否判断是一个正方形,能则输出剩下两点的坐标,不能就输出 -1. ...
- 每次rand出来都是41？说好的随机数呢？！
rand()函数是C++标准函数库提供的随机数生成器,生成0-RAND_MAX之间的一个"伪随机"整数,理论上可以产生的最大数值为2^16-1,即32767. rand()函数不接 ...
- Java类成员访问控制权限
类成员访问控制权限 在JAVA中有四种访问控制权限,分别为:private, default, protected, public 1.Private 如果一个成员方法或变量名前使用了private, ...
- Runnable、Callable、Future和FutureTask之二：源码解析
一.Callable与Future类图 1.类图 许多任务实际上都是存在延迟的计算,对于这些任务,Callable是一种更好的抽象:它会返回一个值,并可能抛出一个异常.Callable接口: V ca ...
- Struts2中的FilterDispatcher和StrutsPrepareAndExecuteFilter的区别
1.转自:https://blog.csdn.net/zwx521515/article/details/79300453 在Struts2开发中,很多人问到,声明过滤器的时候,为什么有的时候用&qu ...