自定义动画方法animate()

最新推荐文章于 2024-04-19 10:05:52 发布

张大仙是个妖怪

最新推荐文章于 2024-04-19 10:05:52 发布

阅读量1.4k

点赞数 2

分类专栏： # jQuery中的动画文章标签： jQuery 自定义动画方法animate

本文链接：https://blog.csdn.net/NDKHBWH/article/details/66974401

版权

jQuery中的动画专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.自定义简单动画

animate()方法可以使元素动起来,而且animate()方法更具有灵活性.通过animate()方法,能够实现更加精细新颖的动画效果;使用animate()方法之前,为了能影响该元素的"top","left","bottom"和"right"样式属性,必须把元素的position样式设置为"relative"或者"absolut"

<style type="text/css">
*{margin:0;padding:0;}	
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script type="text/javascript">
$(function(){
//      $("#panel").click(function(){
//	   $(this).animate({left: "500px"}, 3000);
//	})      
   $("#panel").toggle(function(){
	    $(this).animate({left: "500px"}, 3000);
	},function(){
	    $(this).animate({top:"200px"}, 3000);
	})
})
</script>
</head>
<body>
<div id="panel"></div>
</body>

2.累加,累减动画

在之前的代码中,设置了{left:"500px"}作为动作参数.如果在500px之前加上"+="或者"-="符号表示在当前位置累加或者累减

3.多重动画

(1)同时执行多个动画

如果需要向右滑动的同时放大元素的高度.{left:"500px",height:"200px"}

<style type="text/css">
*{margin:0;padding:0;}	
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script type="text/javascript">
$(function(){
    $("#panel").click(function(){
	    $(this).animate({left: "500px",height:"200px"}, 3000);
	})
})
</script>
</head>
<body>
<div id="panel"></div>
</body>

(2)按顺序执行多个动画

上面的是同时进行的,如果需要先向左移动然后再放大高度,按顺序写入代码就可以了$(this).animate({left:"500px"},3000);$(this).animate({height:"500px"},3000);或者直接串联$(this).animate({left:"500px"},3000).animate({height:"500px"},3000);这个称为动画队列

<style type="text/css">
*{margin:0;padding:0;}    
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script type="text/javascript">
$(function(){
    $("#panel").click(function(){
         $(this).animate({left: "500px"}, 3000)
                .animate({height: "200px"}, 3000);
    })
})
</script>
</head>
<body>
<div id="panel"></div>
</body>

4.综合动画

单机div元素让它向右移动的同时增大它的高度,并将它们的不透明度从50%变换为100%,然后再让它从上到下移动,同时它的宽度变大,当完成这些效果后,淡出方式隐藏

<style type="text/css">
*{margin:0;padding:0;}	
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script type="text/javascript">
    $(function(){
        $("#panel").css("opacity", "0.5");
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
					 .animate({top: "200px" , width :"200px"}, 3000 )
					 .fadeOut("slow");
        });
    });
</script>
</head>
<body>
<div id="panel"></div>
</body>

张大仙是个妖怪

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义动画方法animate()

1.自定义简单动画animate()方法可以使元素动起来,而且animate()方法更具有灵活性.通过animate()方法,能够实现更加精细新颖的动画效果;使用animate()方法之前,为了能影响该元素的"top","left","bottom"和"right"样式属性,必须把元素的position样式设置为"relative"或者"absolut"2.累加,累减动画在之前的代码中,设置了{left:"500px"}作为动作参数.如果在500px之前加上"+="或者"-="符号表示在当前位置累加
复制链接

扫一扫