В общем задание вот такое: "Используя css-спрайты и jquery (jquery.com) сделать кнопку, изменяющую фон при наведении мышкой на более светлый и при клике на более темный. После клика через 1 секунду кнопка должна начать исчезать и через еще 2 исчезнуть полностью."
На данный момент написал следующее:
<!DOCTYPE>
<html>
<head>
<title>CSS-спрайт и JQuery</title>
<meta http-equiv="Content-Type" content="text/html;">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.megaweb').each(function(){
$(this).mouseover(function(){
$(this).css("background-position","0");
});
$(this).mouseout(function(){
$(this).css("background-position","-157px");
});
$(this).click(function(){
$(this).css("background-position","-314px");
$(this).delay(1000).animate({opacity:'0.0'},2000);
});
});
});
</script>
</head>
<body>
Пример последовательно обработки событий<br>
<div class="megaweb" href="">dsvsdvds</a>
</body>
</html>
Вся проблема в том что если в процессе выполнения анимации вывести курсор за пределы дива картинка передвинет положение согласно событию mouseout. Так вот как заблокировать mouseout если click уже произошло, ну или производится.