Jquery第二课--效果
作者：互联网
a.
show()显示
hide()隐藏
toggle()切换上面两个方法
b.
fadeIn() 淡入
fadeOut() 淡出
fadeToggle()切换上面两个方法
fadeTo()允许渐变为给定的不透明度（值介于 0 与 1 之间）
c.
slideDown() 向下滑显示
slideUp() 向上滑动隐藏
slideToggle()切换上面两个方法
d.
animate({})动画
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
e.
stop() 停止滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- <button id="button1">效果1</button>
<button id="button2">效果2</button>
<div style="background-color: red;width: 100px;height: 100px;"></div>
<div style="background-color: yellow;width: 100px;height: 100px;display: none;"></div>
<button id="button3">效果3</button>
<div style="background-color: blue;width: 100px;height: 100px;display: none;"></div>
<button id="button4">效果4</button>
<div style="background-color: green;width: 100px;height: 100px;display: none;"></div>
<button id="b5">效果5</button>
<div style="background-color: greenyellow;width: 100px;height: 100px;"></div>
<button id="b6">效果6</button>
<div style="background-color: greenyellow;width: 100px;height: 100px;"></div> -->
<!-- <button id="b7">效果7</button>
<div style="background-color: greenyellow;width: 100px;height: 100px;"></div> -->
<!-- <button id="b8">b8</button>
<div style="background-color: greenyellow;width: 100px;height: 100px;display: none"></div> -->
<!-- <button id="b9">b9</button>
<div style="background-color: greenyellow;width: 100px;height: 100px;"></div> -->
<!-- <button id="b10">b10</button>
<div style="background-color: greenyellow;width: 100px;height: 100px;"></div> -->
<!-- <button id="a">a</button>
<div style="background-color: greenyellow;width: 100px;height: 100px;position: absolute"></div> -->
<button id="b">b</button>
<button id="b1">b1</button>
<div id="b2" style="background-color: greenyellow;width: 100px;height: 100px;display: none"></div>
</body>
</html>
<script src="./jquery-3.4.1.min.js"></script>
<script>
$(function(){
$('#b').click(function () {
$('#b2').slideDown(5000)
});
$('#b1').click(function () {
$('#b2').stop()
})
$("#a").click(function(){
$(this).next().animate({left:'250px',width:'200px'});
});
$('#b10').click(function () {
$(this).next().slideToggle();
});
$('#b9').click(function () {
$(this).next().slideUp();
});
$('#b8').click(function () {
$(this).next().slideDown();
});
$('#b7').click(function () {
$(this).next().fadeTo('slow','0.3')
});
$('#button1').click(function(){
$(this).next().next().hide('slow',function(){
alert(123)
});
});
$('#button2').click(function(){
$(this).next().next().show('slow');
});
$('#button3').click(function(){
$(this).next().toggle('slow');
});
$('#button4').click(function(){
$(this).next().fadeIn('slow')
});
$('#b5').click(function () {
$(this).next().fadeOut('slow')
});
$('#b6').click(function () {
$(this).next().fadeToggle('slow')
})
})
</script>
标签：Jquery,function,slow,第二课,效果,next,click,slideDown 来源： https://blog.csdn.net/weixin_36691991/article/details/100941244