<!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 >show</button>
<button >hide</button>
<button >toggle</button><br>
<img src="../images/6.jpg" name="picture" >
</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 >go</button>
<button >out</button><br>
<img src="../images/6.jpg" name="picture" >
</body>
</html>