|
Сообщение от mishanay
|
|
анимация зацикливается
|
Нет.
Почему-то события mouseout и mouseover mouseout срабатывают при движении по ДИВу...
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.box {
position: relative;
background-color: #ffffff;
}
.border {
position: absolute;
width: 0;
height: 0;
}
.up {
top: 0;
right: 0;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
}
.dn {
left: 0;
bottom: 0;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
$('.box').mouseover(function (){
alert(1);
var o=$('.border');
o.css({
borderColor: 'green',
});
o.animate({
width: '50%',
height: '50%'
});
});
$('.box').mouseout(function (){
alert(2);
var o=$('.border');
o.animate({
width: 0,
height: 0
});
o.css({
borderColor: '#ffffff',
});
});
});
</script>
</head>
<body>
<div class='box'>
<div class='border up'></div>
<div class='border dn'></div>
<img src='http://pizza2dom.ru/image/cache/data/pizza/margarita-250x250.jpg' />
</div>
</body>
</html>