jQuery学习笔记（三）js中的动画效果

最新推荐文章于 2023-11-28 23:16:59 发布

JESSE_JAVA

最新推荐文章于 2023-11-28 23:16:59 发布

阅读量227

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/weixin_36171533/article/details/78704995

版权

前端开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<style>
#one{
width:300px;height:300px;border: 1px solid red;
}
#two{
width:200px;height:200px;border: 1px solid red; margin: 50px auto;
}
#san{
width:100px;height:100px;border: 1px solid red;margin: 50px auto;
}
#ruihan{
width: 100px;height: 500px;border: 1px solid red; background: RED;
}
#jesse{
width: 100px;height: 100px;border: 1px solid blue; background: blue;position: absolute; left: 200px;top: 40px;
}
</style>
<script>
$(function(){
$("#one").click(function(){
console.log("one");
});
$("#two").click(function(){
console.log("two");
});
$("#san").click(function(e){
console.log("san");
e.stopPropagation();
});
//隐藏和显示的三种方法
//第一种
$("input[value='hide']").click(function(){
$("#ruihan").hide(500);
});
$("input[value='show']").click(function(){
$("#ruihan").show(500);
});
//第二种
$("input[value='slideUp']").click(function(){
$("#ruihan").slideUp(500);
});
$("input[value='slideDown']").click(function(){
$("#ruihan").slideDown(500);
});
//第三种
$("input[value='fadeOut']").click(function(){
$("#ruihan").fadeOut(500);
});
$("input[value='fadeIn']").click(function(){
$("#ruihan").fadeIn(500);
});
//animate动画是可以组合的，可以多写几条
//尝试组合
$("input[value='animate']").click(function(){
for(var i=1;i<50;i++){
$("#jesse").animate({width:"100px",height:"100px",left:"800px",top:"500px",background:"#000"},5000).html("这是第"+i+"次循环");
$("#jesse").animate({width:"100px",height:"100px",left:"0px",top:"40px",background:"#000"},5000).html("这是第"+i+"次循环");
}
});
//组合结束
// $("input[value='animate']").click(function(){
// $("#jesse").animate({width:"100px",height:"100px",left:"800px",top:"500px",background:"#000"},5000);
// });
// $("input[value='animate']").click(function(){
// $("#jesse").animate({width:"100px",height:"100px",left:"0px",top:"40px",background:"#000"},5000);
// });
// $("input[value='animate']").click(function(){
// $("#jesse").animate({width:"100px",height:"100px",left:"800px",top:"40px",background:"#000"},5000);
// });
// $("input[value='animate']").click(function(){
// $("#jesse").animate({width:"100px",height:"100px",left:"0px",top:"500px",background:"#000"},5000);
// });
// var $li=$("ul li"); //获取索引的li
// console.log("元素个数为："+$li.length);
// $li.each(function(i){
// //i表示当前遍历的元素索引
// //this表示当前遍历出来的dom元素
// console.log("索引："+i);
// console.log("DOM元素："+this);
// console.log("转化为jq元素："+$(this));
// $(this).html($(this).html()+i);
// console.log("当前元素的索引为："+$li.index(this));
// });
// $("input[type='button']").click(function(){
// var index=parseInt($("#txtindex").val());
// var $li=$("li").eq(index);
// document.write($li.html());
// console.log($li.html());
// });
});

</script>
</head>
<body>

<input type="text" id="txtindex"/>
<input type="button" value="打印"/>
<ul>
<li>美国</li>
<li>中国</li>
<li>日本</li>
<li>新加坡</li>
</ul>
<input type="button" value="hide">
<input type="button" value="show">
<input type="button" value="slideUp">
<input type="button" value="slideDown">
<input type="button" value="fadeOut">
<input type="button" value="fadeIn">
<input type="button" value="animate">
<div id="ruihan"></div>
<div id="jesse">快来抓我啊，com on！</div>
</body>
</html>

JESSE_JAVA

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记（三）js中的动画效果

Document#one{width:300px;height:300px;border: 1px solid red;}#two{width:200px;height:200px;border: 1px solid red; margin: 50px auto;}#san{width:100px;height:100px;border: 1px solid
复制链接

扫一扫

专栏目录