Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.12.2011, 12:44
Новичок на форуме
Отправить личное сообщение для Budyaga Посмотреть профиль Найти все сообщения от Budyaga
 
Регистрация: 05.12.2011
Сообщений: 2

Проблемы с animate и backgroundPosition
http://demo.en.cx/GameDetails.aspx?gid=15736 - блок "От автора игры" с параллакс-скроллингом.

$(function(){
	$('head').append('<link href="http://d2.endata.cx/data/games/15736/prison.css" type="text/css" rel="stylesheet" />');
	enter = false;
	var skof = $('#skof');
	var link = $('#link');
	var fon = $('#fon');
	var opis = $('#opis');
	opis.live('mousemove', function(e) {
		var offset = opis.offset();
		var curX = (e.pageX - offset.left);
		var smar = 70-Math.round(curX/11);
		var t = 20*Math.abs(parseInt(skof.css('marginLeft'))-smar);
		if (t==0 || enter==true) {
			enter = true;
			skof.css('marginLeft', smar);
			link.css('marginLeft', 319-smar);
			fon.css('backgroundPosition', (smar*(-1.4)));
		}
		else { 
			skof.stop(true).animate({
				marginLeft: smar
			}, t);
			link.stop(true).animate({
				marginLeft: 319-smar
			}, t);
			fon.stop(true).animate({
				backgroundPosition: smar*(-1.4)
			}, t);
		}
	}).live('mouseleave', function() {
		enter = false;
		var smar = skof.css('marginLeft');
		var t = parseInt(smar)*20;
		skof.stop(true).animate({
			marginLeft: 0
		}, t);
		link.stop(true).animate({
			marginLeft: 319
		}, t);	
		fon.stop(true).animate({
			backgroundPosition: 0
		}, t);
	}).live('mouseenter', function() {
		skof.stop(true);
		link.stop(true);
		fon.stop(true);
	});
})


В ИЕ8 при событии mouseleave анимация:
fon.stop(true).animate({
	backgroundPosition: 0
}, t);

выполняется мгновенно, в то время как остальные двигающиеся части:
skof.stop(true).animate({
	marginLeft: 0
	}, t);
link.stop(true).animate({
	marginLeft: 319
}, t);

Выполняются за время равное t
Ответить с цитированием
  #2 (permalink)  
Старый 05.12.2011, 13:38
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

fon.stop(true).animate({ 
    backgroundPosition: "0 0"
}, t);
Ответить с цитированием
  #3 (permalink)  
Старый 05.12.2011, 14:11
Новичок на форуме
Отправить личное сообщение для Budyaga Посмотреть профиль Найти все сообщения от Budyaga
 
Регистрация: 05.12.2011
Сообщений: 2

Эффекта ноль. Что интересно, к этому элементу уже применяется подобная анимация в событии mouseenter.
Ответить с цитированием
  #4 (permalink)  
Старый 05.12.2011, 16:04
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

Сообщение от Budyaga
В ИЕ8 при событии mouseleave анимация:
fon.stop(true).animate({
backgroundPosition: 0
}, t);

выполняется мгновенно
background-position это не цифровое свойство (как left, top) - это строка
к ней стандартно не применяется анимация jquery
только в конце анимации ставится значение, например '0 0'
Ответить с цитированием
  #5 (permalink)  
Старый 05.12.2011, 19:21
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

если это свойство разделить на два и анимировать по-отдельности (пр. код), то анимируется нормально.

$("div").animate({backgroundPositionX:"150px", backgroundPositionY:"150px"},{duration:'slow'});
Ответить с цитированием
  #6 (permalink)  
Старый 05.12.2011, 20:09
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

css свойство background-position-x и background-position-y не везде работает http://htmlbook.ru/css/background-position-y
Ответить с цитированием
  #7 (permalink)  
Старый 05.12.2011, 20:22
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
      div {
        background-image: url('http://javascript.ru/forum/image.php?u=12584&dateline=1310044212');
        width: 80px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <div></div>

<script type="text/javascript">
$(function(){
    $("div").animate({backgroundPositionX:"150px", backgroundPositionY:"150px"},{duration:3000});
});
</script>

  </body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 05.12.2011, 21:42
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

а можно короче, используя параметр step
<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <style>
      div {
        background-image: url('http://javascript.ru/forum/image.php?u=12584&dateline=1310044212');
        width: 80px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <div></div>

<script>
$(function(){
    $("div").animate({backgroundPositionMy:150},{duration:3000, step: function (n) {
        $(this).css('background-position', n + 'px ' + n + 'px');
    }});
});
</script>
 
  </body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
animate() тормозит theo_ jQuery 3 21.10.2011 11:48
проблема с div И animate g00000dman jQuery 2 24.03.2011 22:34
jQuery, функция animate(), рекурсия xintrea jQuery 12 03.01.2011 11:33
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 13:37
Drug&Drop + всплывание события = проблемы =(( _NoName_ Events/DOM/Window 4 05.03.2009 16:47