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

前言:整理之前做的内容,动画执行结束才执行下一个动画动作,要添加.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>

效果


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页