|
学如逆水行舟，不进则退
自定义动画
animate() 可以实现任意动画效果，需要传递的参数是DOM元素最终的CSS状态和事件
delay() 可以实现动画暂停
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
$('div').animate({
'width':'300px',
'height':'300px',
},3000)
</script>
</body>
</html>
show()
hide()
直接以无参形式调用show()或hide()，会显示和隐藏DOM元素，如果填写参数，就变成动画
toggle() 根据当前状态决定是show还是hide
fadeIn()
fadeOut()
动画淡入淡出
sideUp()
sideDown()
垂直方向逐渐收缩或展开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
width: 180px;
height: 180px;
background-image: url(../../a.jpeg);
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
$('div').mouseenter(function(){
$(this).hide(1000);
})
$('div').mouseleave(function(){
$(this).show(1000);
})
$('div').mouseenter(function(){
$(this).fadeOut(1000);
})
$('div').mouseleave(function(){
$(this).fadeIn(1000);
})
$('div').mouseenter(function(){
$(this).slideUp(1000);
})
$('div').mouseleave(function(){
$(this).slideDown(1000);
})
</script>
</body>
</html>
|