jQuery-day03

//jQuery简单动画效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 设置相对/绝对/固定定位,
才能做出动画效果,动画
就是连续改变元素的偏移量. */
img{
position:relative;
}
#gg{
width:200px;
height:100px;
border:1px solid red;
position:fixed;
top:50px;
right:-180px;
}
</style>
<script src="../js/jquery-3.4.1.min.js"></script>
<script>
function f1(){
//$("img").show(3000);
//$("img").slideDown(3000);
$("img").fadeIn(3000);
}
function f2(){
//$("img").hide(3000);//有变浅的效果.
//$("img").slideUp(3000);//无变浅效果,其它和show hide 一样.

//参数2是一个函数,jQuery会在执行
//完动画以后自动调用它.这样的函数
//(完成后自动调用的)称之为回调函数.
$("img").fadeOut(3000,function(){
console.log("完成");
});//只有变浅 无变大小.
//显示隐藏动画的实现原理:
//通过定时器连续改变元素的样式
//(大小和透明度)
//f2相当于主线程,动画相当于支线程,
//二者并发执行,不互相等待.所以
//这句话会立刻执行.
console.log("over");
}
function f3(){
$("#msg").fadeIn(500).fadeOut(2500);
}
function f4(){
$("img").animate({"left":"300px"},3000).animate({"top":"300px"},3000).animate({"left":"0"},3000).animate({"top":"0"},3000);
}
$(function(){
$("#gg").hover(
function(){
$(this).animate({"right":"0"},500);
},
function(){
$(this).animate({"right":"-180px"},500);
}
);
});
</script>
</head>
<body>
<p>
<input type="button" value="显示" onclick="f1();"/>
<input type="button" value="隐藏" onclick="f2();"/>
<input type="button" value="删除" onclick="f3();"/>
<input type="button" value="走你" onclick="f4();"/>
</p>
<p>
<img style="width:218px;height:218px;" alt="" src="../images/IMG_20191112_235308.JPG">
</p>
<p id="msg" style="display:none;">操作成功</p>
<div id="gg"></div>
</body>
</html>

posted @ 2020-05-13 20:34  two_q  阅读(103)  评论(0)    收藏  举报