JQuery中的动画（ppt）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<!DOCTYPE html>
<html>
<head>
<title>test1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("#aa").click(function(){
//显示
//show()
//$("#pic").show(3000); //fadeIn()
//$("#pic").fadeIn(); //slideDown()
//$("#pic").slideDown();
});
$("#bb").click(function(){
//隐藏
//hide
//$("#pic").hide(3000); //fadeOut()
//$("#pic").fadeOut(); //slideUp
//$("#pic").slideUp();
}); $("#cc").click(function(){
$("#pic").toggle();
}); });
</script>
</head> <body>
<button id="aa">show</button>
<button id="bb">hide</button>
<button id="cc">toggle</button><br>
<img src="../images/6.jpg" name="picture" id="pic" style="display:none">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>test2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("#aa").click(function(){
$("#pic").animate({left:"+=300px"},3000)
.animate({top:"+=300px",height:"500px"},3000,function(){
$(this).css({opacity:"0.5"});
});
});
$("#bb").click(function(){
//$("#pic").stop(); //暂停当前的，执行下一个动画
//$("#pic").stop(true); //清除队列
//$("#pic").stop(true,true);//直接到达目前动画的末状态
$("#pic").stop(false,true);
});
}); </script>
</head> <body>
<button id="aa">go</button>
<button id="bb">out</button><br>
<img src="../images/6.jpg" name="picture" id="pic" style="position: absolute;">
</body>
</html>