<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习24篇(动画)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
<style type="text/css">
div {
width: 300px;
height: 200px;
}
.div1{
/**div居中**/
/* margin:auto; */
border:10px solid silver;
background-color:red;
width:300px;
height:150px;
opacity:0.8;/**其他浏览器(0.5为透明度,在0-1之间的浮点数)**/
filter:alpha(opacity=40);/**IE(40为透明度,在0-100之间的整数)**/
}
</style>
</head>
<body style="background-color: #CCE8CF;">
<div id="div4" οnclick="fn4();">
点击我,向上缓缓的消失,再向下缓缓的出现
</div>
<div id="div5" οnclick="fn5();">
点击我....向上缓缓的消失,再向下缓缓的出现
</div>
<div id="div6" οnclick="fn6();">
点击我,向上缓缓的消失,再延迟3秒后再向下缓缓的出现
</div>
<h3 style="color: #cd1636;">JQuery学习24篇(动画)</h3>
<div id="div1" οnclick="fn1();">江西省赣州市于都县(点击我,我就会隐藏)</div>
<input type="button" value="3秒钟缓缓隐藏图片" οnclick="fn2();">
<input type="button" value="显示图片" οnclick="showImg();">
<div id="div2" style="display: flex;">
<img src="img/a.jpg" alt="">
</div>
<input type="button" value="4秒钟缓缓隐藏图片后执行回调函数" οnclick="fn3();">
<div id="div3" style="width: 600px; height: 400px; display: flex;">
<img src="img/b.jpg" alt="" style="width: 600px; height: 400px;">
</div>
<br/>
<div id="div7" style="width: 600px; height: 400px; display: flex;">
<img src="img/c.jpg" alt="" style="width: 600px; height: 400px;">
</div>
<input type="button" value="3秒钟缓缓的淡出" οnclick="fn7();">
<br/><br/>
<input type="button" value="4秒钟缓缓的淡入" οnclick="fn8();">
<br/><br/>
<input type="button" value="淡出淡入" οnclick="fn9();">
<br/><br/>
<div class="div1" οnclick="fn10(this);">
点击我,执行动画效果,animate()函数
</div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function fn1(){
$('#div1').hide();
}
function showImg(){
$('#div2').show();
}
function fn2(){
//3秒钟缓缓隐藏
$('#div2').hide(3000);
}
function fn3(){
$('#div3').hide(4000, function() {
alert('动画结束了....');
});
}
function fn4(){
//向上缓缓的消失
$('#div4').slideUp(2000);
//向下缓缓的出现
$('#div4').slideDown(2000);
}
function fn5(){
//向上缓缓的消失
$('#div5').slideUp(2000, function(){
//向下缓缓的出现
$('#div5').slideDown(2000);
});
}
function fn6(){
//向上缓缓的消失,过3秒后再向下缓缓的出现
$('#div6').slideUp(2000).delay(3000).slideDown(2000);
}
function fn7(){
//3秒钟缓缓的淡出
$('#div7').fadeOut(3000);
}
function fn8(){
//4秒钟缓缓的淡入
$('#div7').fadeIn(4000);
}
function fn9(){
//3秒钟缓缓的淡出,过4秒后再缓缓的淡入
$('#div7').fadeOut(3000).delay(4000).fadeIn(6000);
}
var flag = 0;
function fn10(obj){
console.log($(obj), $(obj)[0], $(obj)[0].className, $(obj)[0].innerHTML);
var params = {"marginLeft":"200px", "width":"800px"};
var params2 = {"marginLeft":"0px", "width":"400px"};
if(flag == 0){
// $(obj).animate(params);
// $(obj).animate(params,2000);
$(obj).animate(params,2000, function(){//回调函数
//如下代码:只能瞬间改变,不能缓缓的改变
$(obj).css('border', '12px solid SeaGreen');
});
flag = 1;
}else{
// $(obj).animate(params2);
// $(obj).animate(params2,2000);
$(obj).animate(params2,2000, function() {//回调函数
//如下代码:只能瞬间改变,不能缓缓的改变
$(obj).css('border', '5px solid Black');
});
flag = 0;
}
}
</script>
</html>
JQuery学习24篇(动画)
猜你喜欢
转载自blog.csdn.net/czh500/article/details/103917354
今日推荐
周排行