jq 侧边栏点击收缩效果

最新推荐文章于 2025-04-23 09:48:58 发布

转载最新推荐文章于 2025-04-23 09:48:58 发布 · 446 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mingjixiaohui/p/5293949.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用HTML、CSS及jQuery实现的简单动画效果案例。案例中详细展示了如何通过CSS定位和jQuery动画方法使一个包含两个子元素的红色盒子在点击时左右移动。文章通过两种不同的方式检查元素的位置，并据此改变盒子的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
	*{ margin:0 ; padding :0;}
	.box{ width:500px; height:300px; background:red; position:relative; left: -200px;}
	.box1{width:200px; height:300px; background:green; float:left;}
	.box2{ width:300px; height:300px; background:blue; float:left;}
	</style>

	
	<script src="jquery-2.2.2.min.js"></script>
	<script>
	$(function(){
			$(".box").click(function(){
				console.log($(".box").css("left"))
				if( $(".box").position().left == -200 ){//position().left获取的是不带px的
					$(".box").animate({"left":"0"})
				}else{
					$(".box").animate({"left":"-200"})
				}
				
			})

			// $(".box").click(function(){
			// 	console.log($(".box").css("left"))
			// 	if( $(".box").css("left") == "-200px" ){//css("left")只有一个参数的时候 是取值 但是这个带有px
			// 		$(".box").animate({"left":"0"})
			// 	}else{
			// 		$(".box").animate({"left":"-200"})
			// 	}
				
			// })
	})



	</script>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
	</div>
</body>
</html>

转载于:https://www.cnblogs.com/mingjixiaohui/p/5293949.html