Question

jquery 改变div大小 hover动画问题

$(".test").hover(function(){
var thisw = $(this).width();
var thish = $(this).height();
$(this).stop().animate({width: thisw+50,height:thish+50});
},function(){
$(this).stop().animate({width: thisw,height:thish});
});
这样只有
$(this).stop().animate({width: thisw+50,height:thish+50});
}起了作用，后半段完全没反应，求教怎么解决 【鼠标放上去变大，离开变化原样，因为div有点多，所以没写固定px】。

Answer 1

根据程序可以看出为变量的作用域问题，在第一个方法里面定义的变量在第二个方法中是没办法访问的。当鼠标经过时可以触发动画效果。鼠标移出时则无效果。由于鼠标移出时找不到var thisw = $(this).width();var thish = $(this).height();两个定义的变量。

正确的写法为：

$(".test").hover(function(){
var thisw = $(this).width();
var thish = $(this).height();
$(this).stop().animate({width: thisw+50,height:thish+50});
},function(){
var thisw = $(this).width();
var thish = $(this).height();
$(this).stop().animate({width: thisw-50,height:thish-50} 
);

Answer 2

明显局部变量问题嘛，改成：
$(".test").hover(function(){
var thisw = $(this).width();
var thish = $(this).height();
$(this).stop().animate({width: thisw+50,height:thish+50});
},function(){
var thisw = $(this).width();
var thish = $(this).height();
$(this).stop().animate({width: thisw-50,height:thish-50});
});

追问

瞬间顿悟啊

Answer 3

明显局部变量问题嘛，改成：
$(".test").hover(function(){
var thisw = $(this).width();
var thish = $(this).height();
$(this).stop().animate({width: thisw+50,height:thish+50});
},function(){
var thisw = $(this).width();
var thish = $(this).height();
$(this).stop().animate({width: thisw-50,height:thish-50});
});

Answer 4

$(".test").hover(function(){ 只执行一个function

你可以在写个 mouseout事件 前提 你得写个全局参数记录 width 和height

追问

哦谢谢了

追答

我也学习了