помогите пожалуйста с багом.
решил немного разобраться с jquery. сделал такую вещь:
на страничке есть картинки, когда наводишь мышкой на картинку, она увеличивается, когда мышка убирается, она уменьшается.
но получился такой баг:
если быстро водить мышкой по картинках, пока они не успевают уменьшаться, то они увеличиваются все больше и больше.
за код не ругайте сильно. уверен, написано все очень неправильно, просто вот-вот недавно начал изучение javascript и jquery
вот собственно html страничка со скриптом
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(makethumb);
//Функция изменяет размеры фотографий до размера дивов и центрирует
function makethumb(){
var divw = parseFloat($("div.thumb").css("width"));
var divh = parseFloat($("div.thumb").css("height"));
$("img").each(
function(){
var imgw = parseFloat($(this).css("width"));
var imgh = parseFloat($(this).css("height"));
var k = imgw / divw;
$(this).css("width",imgw / k);
$(this).css("height",imgh / k);
$(this).css("margin-top",(divh - imgh / k) / 2);
var imgw = parseFloat($(this).css("width"));
var imgh = parseFloat($(this).css("height"));
if (imgh > divh){
var k = imgh / divh;
$(this).css("width",imgw / k);
$(this).css("height",imgh / k);
$(this).css("margin-top",0);
$(this).css("margin-left",(divw - imgw / k) / 2);
};
}
);
}
//Функция увеличивает/уменьшает фотографии при наведении мышкой
$(function(){
var elm = {
"src": "",
"w": 0,
"h": 0
};
var k = 1.5;
$("div.thumb").hover(
function(){
if (elm.src != $(this).children("img").attr("src")){
elm.src = $(this).children("img").attr("src");
elm.w = parseFloat($(this).children("img").css("width"));
elm.h = parseFloat($(this).children("img").css("height"));
}
$(this).css({backgroundColor:"#BEBEBE"});
$(this).children("img").stop(true).animate({
width:elm.w * k,
height:elm.h * k,
left:- (elm.w * (k - 1) / 2),
top:- (elm.h * (k - 1) / 2)
},500
);
},
function(){
$(this).css({backgroundColor:"#808080"});
$(this).children("img").stop(true).animate({
width:elm.w,
height:elm.h,
left:0,
top:0
},500
);
}
);
});
</script>
</head>
<body>
<div id="container">
<div class="thumb">
<img src="img/1.jpg"/>
</div>
<div class="thumb">
<img src="img/2.jpg" />
</div>
<div class="thumb">
<img src="img/3.jpg" />
</div>
<div style="clear:both" />
</div>
</body>
</html>
файл стилей
#container{
width: 670px;
margin: 50px auto;
}
div.thumb{
border: 1px solid #000000;
background-color: #808080;
width:150px;
height:150px;
margin:30px;
padding: 5px;
float:left;
}
img{
position:relative;
}