jQuery动画方法
1、.hover方法
描述：将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。javascript
.hover()方法是同时绑定 mouseenter和 mouseleave事件。咱们能够用它来简单地应用在 鼠标在元素上行为。css
调用$(selector).hover(handlerIn, handlerOut)是如下写法的简写： html
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
下面示例为模拟鼠标悬停java
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:200px;
height: 200px;
border: 1px solid red;
}
.over{
background-color: yellow;
border: 5px dashed green;
color: blue;
}
.out{
background-color: red;
border: 5px solid yellow;
color: pink;
}
</style>
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<div>这是个有故事的div</div>
</body>
</html>
<script>
$('div').hover(function(){
this.className = 'over';
},function(){
this.className = 'out';
})
</script>
2、动画方法
jQuery中的动画效果均可以指定3种速度参数”slow”、”normal”、”fast”，甚至以毫秒为单位进行添加动画效果。jquery
1.show()显示元素与hide()隐藏元素。
示例：点击标签，显示和隐藏divide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示与隐藏</title>
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<h3>点我咯</h3>
<div>这是个有故事的div</div>
</body>
</html>
<script>
var flag = true
$('h3').bind('click',function(){
if(flag){
$(this).next().hide();
}else{
$('div').show();
}
flag = !flag;
})
</script>
2.fadeIn()与fadeOut()淡入淡出方法(颜色变淡最后消失)函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='jquery-3.1.1.js'></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<h3 style="width: 100px;background-color: red">点我看看咯</h3>
<div>这是个有故事的div</div>
</body>
</html>
<script>
var flag = true;
$('h3').click(function(){
if(flag){
$(this).next().fadeOut(5000);
}else{
$('div').fadeIn(5000);
};
flag = !flag;
})
</script>
3.slideUp()和slideDown()滑动方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动动画显示</title>
<link rel="stylesheet" href="donghua.css">
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<h3>点我咯</h3>
<div>梅刚是傻逼</div>
</body>
</html>
<script>
var flag = true;
$('h3').click(function(){
if(flag){
$(this).next().slideUp(3000);
}else{
$('div').slideDown(3000);
}
flag = !flag
})
</script>
Css样式布局
*{
margin: 0;
padding:0;
}
div{
background-color: red;
width: 200px;
height: 200px;
position: relative;
}
h3{
background-color: green;
width: 200px;
}
4.animate(params,[speed],[callback])自定义动画方法
参数说明：
params:一个包含样式属性及值的映射
speed:速度参数，可选
callback:动画完成时执行的函数，可选
注意：使用animate()方法以前，必须将元素的position样式改成”relative”或”absolute”动画
animate()方法能够实现
自定义简单动画
累加、累减动画(经过”+=”或”-=”设置位置)
(按顺序执行)多重动画
利用动画回调函数实现动画完成时的设置this
判断元素是否处于动画状态
if(!$(element).is(“:animated”)){
// 若是当前没有进行动画，执行的代码
}
示例1：点击div,div向右下方移动，并变大，中止后，返回原位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义动画效果</title>
<script src='jquery-3.1.1.js'></script>
<link rel="stylesheet" href="donghua.css">
</head>
<body>
<div></div>
</body>
</html>
<script>
$('div').click(function(){
$(this).animate({
width:'500px',
height:'500px',
left:'300px',
top:'300px',
},5000,function(){
$(this).animate({
width:'100px',
height:'100',
left:0,
top:0
})
})
})
</script>
示例2：点击开始按钮，div向右移动，开始按钮变为暂停，点击移动中的div中止必定，按钮变为开始。（自定义动画累加累减效果实现）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
<title>Document</title>
</head>
<body>
<div></div>
<input type="button" value="开始" id="btn">
</body>
</html>
<script>
$(function(){
$('#btn').click(function(){
var $div = $('div');
if($div.is(":animated")){
$div.stop();
this.value = '开始';
}else{
$('div').animate({left:'+=200px'},3000);
this.value = '暂停';
}
})
})
</script>
五、toggle()方法
切换元素的可见状态。若是被选元素可见，则隐藏这些元素，若是被选元素隐藏，则显示这些元素。
show()与hide()方法的简写形式
示例：点击标签，div显示或隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<h3>点我</h3>
<div>这是个有故事的div</div>
</body>
</html>
<script>
$('h3').click(function(){
$(this).next().toggle(3000); //切换元素的可变状态
})
</script>
六、slideToggle()方法
slideUp和slideDown简写
slideToggle() 方法经过使用滑动效果（高度变化）来切换元素的可见状态。
若是被选元素是可见的，则隐藏这些元素，若是被选元素是隐藏的，则显示这些元素。
$(selector).toggle(speed,callback,switch)
speed 可选，规定元素从可见到隐藏的速度，默认0
在设置速度的状况下，元素从可见到隐藏的过程当中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。若是设置此参数，则没法使用 switch 参数。
callback 可选。toggle 函数执行完以后，要执行的函数。
switch 可选，布尔值。规定 toggle 是否隐藏或显示全部被选元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<h3>点我</h3>
<div>这是一个有故事的div</div>
</body>
</html>
<script>
$('h3').click(function(){
$('div').slideToggle(3000); //切换元素可见状态
})
</script>
7. fadeTo()方法
fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。
语法：
$(selector).fadeTo(speed,opacity,callback)
speed 可选。规定元素从当前透明度到指定透明度的速度。
opacity 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
callback 可选。fadeTo 函数执行完以后，要执行的函数。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<h3>点我</h3>
<div>这是一个有故事的div</div>
</body>
</html>
<script>
$('h3').bind('click',function(){
$(this).next().fadeTo(3000,0.3,function(){
$(this).css('border','3px dashed green');
})
})
</script>
八、fadeToggle()方法
fadeToggle() 方法在fadeIn() 和fadeOut()方法之间切换。
若是元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。
若是元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。
注释：隐藏的元素不会被彻底显示（再也不影响页面的布局）。
语法：
$(selector).fadeToggle(speed,easing,callback)
speed 可选。规定褪色效果的速度
easing 可选。规定在动画的不一样点上元素的速度。默认值为 "swing"。(可选"linear" - 匀速移动，"swing" - 在开头/结尾移动慢，在中间移动快)
callvack 可选，fadeToggle() 方法执行完以后，要执行的函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<h3>点我</h3>
<div>这是一个有故事的div</div>
</body>
</html>
<script>
$('h3').click(function(){
$(this).next().fadeToggle();
})
</script>
二级菜单联动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级菜单效果</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
div{
width: 20%;
background-color: green;
position: relative;
}
.submenu{
display: none;
}
ul h3{
border: 1px solid red;
}
</style>
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<div>
<ul>
<li>
<h3>美食</h3>
<ul class="submenu">
<li>地锅鸡</li>
<li>皮肚面</li>
<li>馒头</li>
</ul>
</li>
<li>
<h3>读书</h3>
<ul class="submenu">
<li>当代青年</li>
<li>皮囊</li>
<li>海子的诗</li>
</ul>
</li>
<li>
<h3>娱乐</h3>
<ul class="submenu">
<li>明星出轨</li>
<li>最新电影</li>
<li>杨幂离婚</li>
</ul>
</li>
</ul>
</div>
<input type="button" value="隐藏" id="btn">
</body>
</html>
<script>
$('h3').hover(function(){
$(this).css('background-color','red')
$(this).next().show(2000);
},function(){
$(this).css('background-color','yellow')
$(this).next().hide(2000);
});
var flag = true;
var div_width = $('div').css('width');//获取div的宽度
$('#btn').click(function(){
if(flag){
//$('div').css('left','-'+div_width);
$('div').animate({left:'-'+div_width},3000);
this.value = '显示';
}else{
$('div').animate({left:0},3000);
this.value = '隐藏'
}
flag = !flag;
});
</script>
相关文章
- 1. jquery动画-animate方法
- 2. Jquery动画方法 jquery.animate()
- 3. jQuery的animate动画方法及动画排队问题解决
- 4. JQuery动画
- 5. jquery动画
- 6. jQuery动画
- 7. jQuery 之 [ 动画 ]
- 8. jQuery 动画
- 9. 【jQuery】之动画
- 10. JQuery animate动画
- 更多相关文章...
- • ionic 加载动画 - ionic 教程
- • jQuery Mobile 表单滑动条 - jQuery Mobile 教程
- • SpringBoot中properties文件不能自动提示解决方法
- • 算法总结-滑动窗口
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. jquery动画-animate方法
- 2. Jquery动画方法 jquery.animate()
- 3. jQuery的animate动画方法及动画排队问题解决
- 4. JQuery动画
- 5. jquery动画
- 6. jQuery动画
- 7. jQuery 之 [ 动画 ]
- 8. jQuery 动画
- 9. 【jQuery】之动画
- 10. JQuery animate动画