动画
名称 | 写法 | 描述 |
隐藏-->显示 | show() | |
显示-->隐藏 | hide() | |
切换 | toggle() | |
淡入 | fadein() | |
淡出 | fadeout() | |
切换 | fadetoggle() | |
向上滑动隐藏 | slideup() | |
向下滑动显示 | slidedown() | |
切换 | slidetoggle() | |
自定义动画 | 元素.animate({params},[speed],[callback]) | params:必须的定义形成动画的css属性,speed:slow、fast、毫秒数,callback:动画完成后所执行的函数名称 |
案例代码:
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
li{
border: 3px double red;
padding: 5px;
width: 5rem;
background: green;
position: relative;
left: -5rem;
}
</style>
<ul>
<li>xixi</li>
<li>xixi</li>
<li>xixi</li>
<li>xixi</li>
</ul>
<script src="../jquery-3.6.0.js"></script>
<script>
$(function(){
$("li").hover(
function(){$(this).animate({"left":"0"},200)},
function(){$(this).animate({"left":"-5rem"})})
})
</script>