vivo官网鼠标触碰图片拉长------Sestid

女爷i 2023-06-07 03:16 16阅读 0赞

> .animate(\{属性:目标\},function()\{目标完成后执行\})  
> 清除定时器：.stop()【每个动画后都需要清除一次定时器】  
> stop有两个参数，默认情况下为false
> 
> 1.动画列队(第一个参数)：  
>    false：不操作  
>    true：清空  
> 2.当前动画(第二个参数)：  
>    false：立即停止  
>    true：立即到终点  
>

**样式图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70][]

**全部代码： （图片自己加）**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<script src="./jquery.js"></script>
    		<title></title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    
    			#box {
    				border: 1px solid red;
    				width: 602px;
    				height: 202px;
    				overflow: hidden;
    			}
    
    			.sbox {
    				height: 200px;
    				width: 150px;
    				float: left;
    			}
    </style>
    	</head>
    	<body>
    	<div id="box">
    		<div class="sbox"><img src="1.jpg" /></div>
    		<div class="sbox"><img src="2.jpg" /></div>
    		<div class="sbox"><img src="3.jpg" /></div>
    		<div class="sbox"><img src="4.jpg" /></div>
    	</div>
    		</body>
    		<script>
    		    $(".sbox").hover(function() {
    		$(this).stop().animate({
    			width: 300
    		}).siblings().stop().animate({
    			width: 100
    		});
    	},function(){
    		$(".sbox").stop().animate({width:150})
    	})
    		</script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70]: /images/20230601/01b22034937d465281029de8547fbed0.png