猿问

想要的效果是鼠标移入时此图片变宽,鼠标移出时div变回原来的宽度

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<link href="css.css" rel="stylesheet">

<script src="../../jquery/jquery-2.1.4.min.js"></script>

<script src="js.js"></script>

</head>


<body>

<div class="div">

<img src="img/2.jpg">

<img src="img/4.jpg">

<img src="img/3.jpg">

</div>

</body>

</html>

<!--下面是jQuery-->

$(function(){

$(".div img").mousemove(function(){

$(this).animate({width:"300"},1000).siblings().animate({width:"225"},1000)

})

.mouseout(function(){

$(this).css({width:"250"})

      })

})



Echo_Chien
浏览 2128回答 1
1回答

stone310

$(function(){     $(".div img").mouseover(function(){         $(this).stop().animate({width:'300'         },1000).siblings().stop().animate({width:'225'         },1000)     }).mouseout(function(){         $(this).stop().css({width:'250'         })     }) })不知道你要的是不是这种效果,主要添加stop(),为了在触发执行时先将上一次动画停止,之前触发的未完成动画会一直执行
随时随地看视频慕课网APP

相关分类

JQuery
我要回答