JQuery 动画
1 显示、隐藏、
Hide():隐藏; 将高度、宽度、透明度变为0 初始!Display为none;
Show();显示; 将高度、宽度、透明度变为初始值css样式的时候,display为“block”;
Toggle();切换; 如果display为none的时候,点击一下变成block;反之变成none;
<script src="../jquery-3.2.1.min.js"></script>
<style>
#div1{
height: 100px;
width: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="div1"></div>
<button οnclick="btnHide()">样式</button>
</body>
<script>
//获取元素
var div1 =document.getElementById("div1");
var timer;
var width =200;
var height =200;
var opacity = 1; //初始值
function btnHide(){
timer =setInterval(fun,100);
}
function fun(){
width -=5;
height -=5;
opacity -=0.025;
div1.style.width = width+"px";
div1.style.height = height+"px";
div1.style.opacity = opacity;
if(width<=0||height<=0){
clearInterval(timer);
div1.style.display ="none";
}
}
</
和jQuery和Js实现同样效果
<script>
$("button").click(function(){
$("#div1").hide(30000);//三种参数 slow fast 毫秒数 3000 选一
});
</script>
2淡入、淡出
<script src="../jquery-3.2.1.min.js"></script>
<style>
#div1{
width: 200px;
height: 200px;
display: none;
background-color: aqua;
}
</style>
</head>
<body>
<div id="div1"></div>
<button id="btnFadeIn">我是小样我就这样</button><!--淡入-->
<button id="btnFadeOut">我是小样我就这样</button><!--淡出-->
<button id="btnFadeToggle">我是小样我就这样</button><!--切换-->
<button id="btnFadeTo">我是小样我就这样</button><!--固定-->
</body>
<script>
$("#btnFadeIn").click(function(){
$("#div1").fadeIn(4000);
});
$("#btnFadeOut").click(function(){
$("#div1").fadeOut(4000);
});
$("#btnFadeToggle").click(function(){
$("#div1").fadeToggle(3000);
});
$("#btnFadeTo").click(function(){
$("#div1").fadeTo(5000,0.4);
});
</script>
</
fadeIn();淡入;将隐藏的样式通过改变其透明度透明度从0到1,让它显示出来。
fadeOut():淡出; 将显示的样式通过其改变透明度从1到0,让它隐藏起来;
fadeToggle():切换;淡入淡出的切换,
如果样式隐藏了,则将它显示出来,
如果样式显示了,则将它隐藏起来,
fadeTo():固定其透明度 透明度在0到1之间;
3上滑、下滑
SlideUp():上滑;将设置的高度从初识变为0,然后隐藏它;
SlideDown();下滑;先显示它,然后再将设置的高度从0变为初始值;
SlideToggle();上滑与下滑的切换,
如果元素是隐藏的,则让它显示,并把它的高度增加,
如果元素是显示的话,先将高度减为0,在隐藏它;
<script src="../jquery-3.2.1.min.js"></script>
<style>
#div1{
width: 200px;
height: 200px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="div1"></div>
<button id="btnSlideUp">上滑</button>
<button id="btnSlideDown">下滑</button>
<button id="btnSlideToggle">切换</button>
</body>
<script>
$("#btnSlideUp").click(function(){
$("#div1").slideUp(800,function(){
alert("我在上滑");//回调函数
});
});
$("#btnSlideDown").click(function(){
$("#div1").slideDown(800);
});
$("#btnSlideToggle").click(function(){
$("#div1").slideToggle(800);
});
</script>
4 滑动
自定义动画
移动一个块到另一个块 ,同时使用多个属性实现动画效果,(移动位置、颜色透明度、大小的改变!)
<script src="../jquery-3.2.1.min.js"></script>
<style>
#p{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
}
</style>
</head>
<body>
<button>开 始 动 画</button>
<div id="p"></div></body><script>
var p = $("#p");
$("button").click(function(){
//设置多个css样式
$("#p").animate({left:'200px',top:'200px'});
//设置相关属性
$("#p").animate({
left:'80px',
top:'80px',
width:'+=100px',
height:'+=100px',
opacity:'0.09',
});
});
</script>
改变与定义值来实现我们所需要的内容的显示隐藏!
//预定义值
$("#p").animate({
//height:'hide',
height:'toggle'
});
.Animate()中三个参数;
第一个参数是需要改变的样式;
第二个参数就是现实的速度(slow,fast,指定毫秒数)
<div id="div"></div>
<button id="start">开始按钮</button>
<button id="stop">结束按钮</button>
</body>
<script>
var div = $("div");
$("#start").click(function(){
div.animate({height:'300px'},"slow");
div.animate({ width:'300px'},"slow");
div.animate({ width:'100px'},"slow");
div.animate({height:'100px'},"slow");
});
$("#stop").click(function(){
div.stop(true);
});
</script>
两个参数
Start()
Stop()