1.jQuery slideUp() 方法用于向上滑动元素。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
// slideup(speed,easing,callback)
// 1.speed 可选。规定显示效果的速度 毫秒 "slow" "fast"
// 2.方法执行完之后，要执行的函数。
$('.up').click(function(){
$('div').slideUp(2000,function(){
alert('向上滑动执行完毕')
}) ;
})
2.jQuery slideDown() 方法用于向下滑动元素。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
// slidedown(speed,easing,callback)
// 1.speed 可选。规定显示效果的速度 毫秒 "slow" "fast"
// 3.方法执行完之后，要执行的函数。
$('.down').click(function(){
$('div').slideDown(2000, function(){
alert('向下滑动执行完毕')
}) ;
})
3.jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑动效果</title>
<style >
div{
width: 200px;height: 200px;
background-color: purple;
display: block;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<!-- 2个按钮 -->
<button class="up"> 向上滑动 </button>
<button class="down"> 向下滑动</button>
<button class="three"> 切换</button>
<div></div>
<!-- <script type="text/javascript"> -->
<script>
// 1.入口函数
$(function(){
// slideup(speed,callback)
// 1.speed 可选。规定显示效果的速度 毫秒 "slow" "fast"
// 2.方法执行完之后，要执行的函数。
$('.up').click(function(){
$('div').slideUp(2000,function(){
alert('向上滑动执行完毕')
}) ;
})
// slidedown(speed,,callback)
// 1.speed 可选。规定显示效果的速度 毫秒 "slow" "fast"
// 3.方法执行完之后，要执行的函数。
$('.down').click(function(){
$('div').slideDown(2000, function(){
alert('向下滑动执行完毕')
}) ;
})
// slideToggle (speed,callback)
// 1.speed 可选。规定显示效果的速度 毫秒 "slow" "fast"
// 3.方法执行完之后，要执行的函数。
$('.three').click(function(){
$('div').slideToggle(1000, function(){
alert('切换执行完毕')
}) ;
})
})
</script>
</body>
</html>
4.事件切换事件 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标事件案例</title>
<style >
div{
width: 200px;height: 200px;
background-color: purple;
display: block;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<!-- 2个按钮 -->
<button class="one"> 触发按钮 </button>
<div></div>
<!-- <script type="text/javascript"> -->
<script>
// 1.入口函数
$(function(){
// 鼠标事件 把经过和离开一起使用
// 1.函数1 经过
// 2.函数2 离开
$('.one').hover( function(){
$('div').slideUp(1200) ;
} ,function(){
$('div').slideDown(1200) ;
} );
})
</script>
</body>
</html>
5.-hover() 方法 如果只规定了一个函数，则它将会在 mouseenter 和 mouseleave 事件上运行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标事件案例</title>
<style >
div{
width: 200px;height: 200px;
background-color: purple;
display: block;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<!-- 2个按钮 -->
<button class="one"> 触发按钮 </button>
<div></div>
<!-- <script type="text/javascript"> -->
<script>
// 1.入口函数
$(function(){
// 鼠标事件 把经过和离开一起使用
// 1.采用切换转态的方法
$('.one').hover( function(){
$('div').slideToggle(1200) ;
})
})
</script>
</body>
</html>
