Форум

Kostyk92 · #1 (**permalink**) 09.03.2012, 23:28

В общем задание вот такое: "Используя 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 уже произошло, ну или производится.

zebra · #2 (**permalink**) 09.03.2012, 23:35

Сделать unbind событий. Или сделать переменную, которая не будет разрешать менять css.

Kostyk92 · #3 (**permalink**) 09.03.2012, 23:37

спасибо большое. а то шарил, шарил документацию - ни че не нашел

T-sh · #4 (**permalink**) 09.03.2012, 23:37

// в самое начало вставить:
var checkPoint = true; 

// в клике добавить:
 $(this).click(function(){
                 checkPoint = false; 
	      $(this).css("background-position","-314px");
	      $(this).delay(1000).animate({opacity:'0.0'},2000);
                 checkPoint = true;
 });

// в маусоуте добавить:
 $(this).mouseout(function(){
         if(checkPoint){
          $(this).css("background-position","-157px");
         }
      });

Kostyk92 · #5 (**permalink**) 09.03.2012, 23:46

Учту на будущее и такой вариант, но в данном случае помойму проще написать просто $(this).unbind() на click

Форум

Справочник

Discord чат

Курсы javascript