jQuery实现文字左右收缩效果示例

夏已微凉、 JavaScript 2023-03-17 23 0 原文

jQuery实现文字左右收缩效果示例

1、使用到的方法

2、效果

3、代码

<!DOCTYPE html>
<html lang="en">
	<head>
    <meta charset="utf-8">
    <title>jquery实现文字左右收缩效果示例</title>
    <style type="text/css">
		.contentDiv{ float:left; overflow: hidden; background: #B0ECFF; } 
		.content{ width: 300px; padding: 10px; border: 1px solid blue; }
    </style>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		<button type="button" class="close">关闭</button>
		<button type="button" class="open">展开</button>
		<button type="button" class="close_open">关</button>
		<p><p/>
		<div class="contentDiv">
			<div class="content">
				<p>游子吟
				<p>
				<p>作者：孟郊
				<p>慈母手中线，游子身上衣。
				<p>临行密密缝，意恐迟迟归。
				<p>谁言寸草心，报得三春晖。
			</div>
		</div>
  </body>
  
  <script type="text/javascript">
	$(function() {
		var boxObj = $(".contentDiv");
        var boxWidth = boxObj.width();

		//关闭
        $(".close").click(function() {
			boxObj.animate({
				width: 0
			});
		});

		//展开
        $(".open").click(function() {
			boxObj.animate({
				width: boxWidth
			});
		});
		
		//开、关
		$(".close_open").click(function() {
			if(boxObj.width()==0){
				$(this).text('关');
				afterWidth = boxWidth;
			}else{
				$(this).text('开');
				afterWidth = 0;
			}
			boxObj.animate({
				width: afterWidth
			});
		});
	});
</script>

</html>