图片滑动效果实现，鼠标移入当前项显示全部信息

最新推荐文章于 2022-04-13 11:52:41 发布

dongsdh

最新推荐文章于 2022-04-13 11:52:41 发布

阅读量574

点赞数

本文链接：https://blog.csdn.net/dongsdh/article/details/79974535

版权

前言：整理之前做的内容，动画执行结束才执行下一个动画动作，要添加.stop(true)

html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    	*{margin: 0;padding: 0;}
    	ul{width: 900px;height:300px;box-sizing:border-box;background: #ddd;overflow: hidden;}
    	li{
    		display: inline-block;
    		width: 134px;
    		height: 300px;
    		background: red;
    		box-sizing: border-box;
    		border: 3px solid green;
       	}
       	ul li:first-child{
       		width: 363px;
       	}
    </style>
</head>
<body>
	<ul>
		<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
	</ul>
	<script src="jquery.min.js"></script>
	<script>
		$(function(){
			$("ul").on("mousemove","li",function(){
				$(this).stop(true).animate({"width":"363px"},200).siblings().stop(true).animate({"width":"134px"},200)
			})
		})
	</script>
</body>
</html>

效果