您的位置:首页 > Web前端 > JQuery

jQuery学习-jQuery动画

2020-08-14 22:42 1046 查看

显示动画

方式一:直接显示,通过display:block

$("div").show();

方式二:渐渐显示出来,通过控制元素宽高、透明度、display,逐渐显示,传入时间参数

$("#d1").show(2000)//2秒后显示完毕

方式三:传入参数逐渐显示

可以是slow:600ms
normal:400ms
fast:200ms

$("#d1").show("slow")

例子
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#d1{
width: 400px;
height: 400px;
background: aquamarine;
display: none;
}
</style>
</head>
<body>
<div id="d1">

</div>
<button type="button">切换</button>
<script type="text/javascript">
$("button").click(function(){
$("#d1").show(2000)
})
</script>
</body>
</html>

方式4:show(时间,回调函数)

$("#d1").show(2000,function(){
alert("执行完毕")
})

隐藏动画

$("#d1").hide();
$("#d1").hide(1000);
$("#d1").hide("slow");
$("#d1").hide(1000,function(){});

隐藏显示切换例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#d1{
width: 400px;
height: 400px;
background: aquamarine;
display: none;
}
</style>
</head>
<body>
<div id="d1">

</div>
<button type="button">切换</button>
<script type="text/javascript">
$("button").click(function(){
if($("#d1").css("display")=="none"){
$("#d1").show(2000)

}else{
$("#d1").hide(2000)
}

})
</script>
</body>
</html>

【注】有写好的函数 $("#d1").toggle(2000) 就可以实现以上操作

滑入和滑出

$("div").slideDown(speed,回调函数) //滑入
$("div").slideUp(speed,回调函数)//滑出

$("div").slideToggle(时间)//已经滑入了就滑出,已经滑出了就滑入

淡入和淡出

$("div").fadeIn(speed,回调函数) //淡入
$("div").fadeOut(speed,回调函数) //淡出

$("div").fadeToggle(时间)//淡入淡出

自定义动画

$("div").animate({params},speed,回调函数);

例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#d1{
width: 400px;
height: 400px;
background: aquamarine;
display: block;
position: absolute;
left: 0;
top: 0;
}
#btn1{
position: absolute;
top: 500px;
left: 0;
}
#btn2{
position: absolute;
top: 500px;
left: 100px;
}

.dh{
animation: leftRight 2s infinite;
}
@keyframes leftRight{
from{
transform: translateX(0);
}
to{
transform: translateX(500px);
}
}
</style>
</head>
<body>
<div id="d1">

</div>
<button type="button" id="btn1">动画启动</button>
<button type="button" id="btn2">动画启动</button>
<script type="text/javascript">
$("#btn1").click(function(){

$("#d1").animate({
left:"400px"
},5000,function(){
alert("动画结束")
})
})
$("#btn2").click(function(){
$("#d1").addClass("dh");

})

</script>
</body>
</html>

以上两种方式都可以让div动起来,但是用css不会卡帧,所以比较推荐css。

停止动画

$(selector).stop(true,false)

第一个参数:

  • true:后续动画不执行
  • false:后续动画会执行
    【注】后续动画是指在一个动画中回调函数中还包含动画。
    第二个参数:
  • true:立即执行完成当前动画
  • false:立即停止当前动画
    ps:参数不写默认两个flase,实际运行直接写stop()较多。

综合例子:
微信公众号的点击列表:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
.menuList{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
background: #efefef;
display: flex;
}
.menuItem{
width: 33.3%;
height: 100px;
border: 1px solid #ccc;
position: relative;
}

.menuItem .title,.childMenu{
width: 33.3vw;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 40px;
border: 1px solid #ccc;
}
.menuItem .menuContent{
display: none;
position: absolute;
left: 0;
top: 0px;
height: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="menuList">
<div class="menuItem">
<div class="title" data-index="0">
娱乐新闻
</div>
<div class="menuContent">
<div class="childMenu">新闻1</div>
<div class="childMenu">新闻2</div>
<div class="childMenu">新闻3</div>
</div>
</div>
<div class="menuItem">
<div class="title" data-index="1">
国内新闻
</div>
<div class="menuContent">
<div class="childMenu">新闻1</div>
<div class="childMenu">新闻2</div>
<div class="childMenu">新闻3</div>
</div>
</div>
<div class="menuItem">
<div class="title" data-index="2">
金融新闻
</div>
<div class="menuContent">
<div class="childMenu">新闻1</div>
<div class="childMenu">新闻2</div>
<div class="childMenu">新闻3</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.title').click(function(){
var index=$(this).attr('data-index');
console.log(index)
$(".menuContent").hide().css({
top: "0px",
height: "0px"
}).eq(index).show().animate(
{
height:"300px",
top:"-300px"
},500)
})
</script>
</body>
</html>

结果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: