JQuery基础动画效果
属性名 | 属性说明 |
---|---|
show(speed,fn) | 显示元素 |
hide(speed,fn) | 隐藏元素 |
toggle(speed,fn) | 1.使显示元素隐藏2.使隐藏元素显示 |
参数1:动画效果持续时间。单位:毫秒
参数2:动画效果完成后执行的函数,可不写
代码示例:
<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
<script>
function run1(){
var picture = $("#picture");
picture.hide(2000);
}
function run2(){
var picture = $("#picture");
picture.show(2000);
}
function run3(){
var picture = $("#picture");
picture.toggle(2000);
}
</script>
</head>
<body>
<img id="picture" src="../img/1.jpg" />
<button onclick="run1()">点击隐藏图片</button>
<button onclick="run2()">点击显示图片</button>
<button onclick="run3()">显示/隐藏图片</button>
</body>
属性名 | 属性说明 |
---|---|
slideDown(speed,fn) | 显示元素 |
slideUp(speed,fn) | 隐藏元素 |
slideToggle(speed,fn) | 1.使显示元素隐藏2.使隐藏元素显示 |
代码参考上例
属性名 | 属性说明 |
---|---|
fadeIn(speed,fn) | 显示元素 |
fadeOut(speed,fn) | 隐藏元素 |
fadeToggle(speed,fn) | 1.使显示元素隐藏2.使隐藏元素显示 |
代码参考上例