Форум

Budyaga · #1 (**permalink**) 05.12.2011, 14:44

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

devote · #2 (**permalink**) 05.12.2011, 15:38

fon.stop(true).animate({ 
    backgroundPosition: "0 0"
}, t);

Budyaga · #3 (**permalink**) 05.12.2011, 16:11

Эффекта ноль. Что интересно, к этому элементу уже применяется подобная анимация в событии mouseenter.

Pavel M. · #4 (**permalink**) 05.12.2011, 18:04

Сообщение от Budyaga

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

выполняется мгновенно

background-position это не цифровое свойство (как left, top) - это строка
к ней стандартно не применяется анимация jquery
только в конце анимации ставится значение, например '0 0'

melky · #5 (**permalink**) 05.12.2011, 21:21

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

$("div").animate({backgroundPositionX:"150px", backgroundPositionY:"150px"},{duration:'slow'});

Pavel M. · #6 (**permalink**) 05.12.2011, 22:09

css свойство background-position-x и background-position-y не везде работает http://htmlbook.ru/css/background-position-y

devote · #7 (**permalink**) 05.12.2011, 22:22

<!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>

Pavel M. · #8 (**permalink**) 05.12.2011, 23:42

а можно короче, используя параметр 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>

Форум

Справочник

Discord чат

Курсы javascript