Javascript.RU

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

Миграция скрипта из трёх строк (jQuery 1.4.2 -> 1.11.1)
Прошу помощи у местных гуру ибо сам только начал изучать JS и jQ.

Есть скрипт который скролит бекграунд. На jQuery 1.4.2, всё отлично работает, но вот возникла необходимость перенести всё это дело на jQuery 1.11.1, а знаний не хватает. В общем, если это не сложно, был бы признателен. Просто хорошим ссылкам на русском по вопросам миграции скриптов со старых версий jQ так же буду рад.

Собственно проблемный код:
$(document).ready(function(){var i=0;while(i<100){
$("#name").animate({backgroundPosition: "100% top"},{duration:100000,specialEasing:{backgroundPosition:'linear'}}); i++} })


Мои догадки:
1) В ".animate" что то поменяли и бекграунд не смещается должным образом.
2) Цикл теперь работает как то иначе, ну и позиция из за этого не смещается.
3) Вызов всей функции теперь надо писать как то иначе?

P.S. Всё что смог нагуглить, это как загрузить две версии jQuery и прицепить их с помощью noConflict, но боюсь я потом буду вечно гореть в аду для кодеров.

Последний раз редактировалось timatey, 16.11.2014 в 22:38.
Ответить с цитированием
  #2 (permalink)  
Старый 16.11.2014, 21:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

timatey,
у вас точно 1 скрипт jQuery а не в придачу с Easing
может макет сделаите, и опишите что хотите анимировать?
,specialEasing:{backgroundPo sition:'linear'}
может убрать?
Ответить с цитированием
  #3 (permalink)  
Старый 16.11.2014, 22:20
Новичок на форуме
Отправить личное сообщение для timatey Посмотреть профиль Найти все сообщения от timatey
 
Регистрация: 16.11.2014
Сообщений: 6

Сообщение от рони Посмотреть сообщение
timatey,
у вас точно 1 скрипт jQuery а не в придачу с Easing
может макет сделаите, и опишите что хотите анимировать?
,specialEasing:{backgroundPo sition:'linear'}
может убрать?
Рони, спасибо за помощь. Код изначально выдернут с какого то шаблона, возможно там и был easing, однако тестирую всё уже в своей простейшей заготовке, и кроме jQuery там ничего нет. Вот полная версия проблемного скрипта, я просто его слегка сократил, что бы было удобней воспринимать информацию:

$(document).ready(function(){var i=0;while(i<100){
$("#name").animate({backgroundPosition: "100% top"}, {duration:100000,specialEasing:{backgroundPosition:'linear'}});
$("#name").animate({opacity: 0}, 1000);
$("#name").animate({backgroundPosition: "0% top"}, {duration:1,specialEasing:{backgroundPosition:'linear'}});
$("#name").animate({opacity: 1}, 1000);
i++}
$('.fade').list_ticker({speed:4000,effect:'fade'});
})


P.S. ",specialEasing:{backgroundPo sition:'linear'}" удалил, без него на старой версии все так же работает, просто скорость прокрутки начинается с очень медленной, и только потом возрастает до нормальной. C jQ 1.11.1 бакграунд стоит на месте как и раньше.

P.P.S. Сейчас попробую закинуть код на какой нибудь специализированный ресурс, что бы удобней было всё это дело смотреть.

Последний раз редактировалось timatey, 16.11.2014 в 22:38.
Ответить с цитированием
  #4 (permalink)  
Старый 16.11.2014, 22:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

timatey,
можно тут или в песочница


Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #5 (permalink)  
Старый 16.11.2014, 22:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

timatey,
Плавное смещение background
Ответить с цитированием
  #6 (permalink)  
Старый 16.11.2014, 22:51
Новичок на форуме
Отправить личное сообщение для timatey Посмотреть профиль Найти все сообщения от timatey
 
Регистрация: 16.11.2014
Сообщений: 6

http://jsfiddle.net/timatey/3gb7c3xz/5/

Вот весь код. Единственное там нет у них jQ 1.4.2 и подобных, соответственно пример не работает, у меня же на 1.4.2 и 1.4.3 бакграунд (текст), развёрнутый на всю высоту экрана плавно плывёт справа налево.
Ответить с цитированием
  #7 (permalink)  
Старый 16.11.2014, 22:56
Новичок на форуме
Отправить личное сообщение для timatey Посмотреть профиль Найти все сообщения от timatey
 
Регистрация: 16.11.2014
Сообщений: 6

Сообщение от рони Посмотреть сообщение
timatey,
Плавное смещение background
Спасибо, сейчас почитаю.
Ответить с цитированием
  #8 (permalink)  
Старый 16.11.2014, 23:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от timatey
Спасибо, сейчас почитаю.
можно нечитать код устарел
Ответить с цитированием
  #9 (permalink)  
Старый 16.11.2014, 23:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

timatey, в вашем коде обнаружил одну вменяемую строку -- слегка скорректировал -- назначение иных строк мне неведомо ... код внизу ... для backgroundPositionY добавьте сами.
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
<script type='text/javascript' src='https://code.jquery.com/jquery-1.11.0.js'></script>
<style type='text/css'>
    html {
	min-height:100%;
	height:100%;
}
body {
	min-height:100%;
	height:100%;
}

#a	{
	width:100%;
	min-height:100%;
	background:#000;
	-moz-box-shadow:0 0 5px rgba(0,0,0,0.8);
	-webkit-box-shadow:0 0 5px rgba(0,0,0,0.8);
	box-shadow:0px 0px 5px rgba(0,0,0,0.8);
}


#b {
	position:absolute;
	left:0%;
	top:0;
	width:100%;
	min-height:100%;
	background:url(https://images.crowdspring.com/blog/wp-content/uploads/2022/08/18131304/apple_logo_black.svg_.png) no-repeat;
	background-size:cover;
	z-index:2;
}
  </style>
<script type="text/javascript">
$(function () {
$("#b").animate({backgroundPositionX: "100%"}, {duration:5000, specialEasing:{backgroundPositionX:'linear'}});
});
</script>
</head>
<body>
<div id="a">
	<div id="b">
	</div>
</div>
</body>
</html>

Последний раз редактировалось рони, 07.08.2023 в 14:53.
Ответить с цитированием
  #10 (permalink)  
Старый 16.11.2014, 23:56
Новичок на форуме
Отправить личное сообщение для timatey Посмотреть профиль Найти все сообщения от timatey
 
Регистрация: 16.11.2014
Сообщений: 6

Сообщение от рони Посмотреть сообщение
можно нечитать код устарел
Поздно, я уже прочитал
Попробовал заменить моё
.animate({backgroundPosition: "100% top"}, {duration:100000});

на то что по ссылке (подставил свои значения)
.animate({'background-position': "100% top"}, 100000);

Но всё без каких-либо изменений.

Собственно пока тут гуглил, нашёл шаблон откуда выдернул скрипт: http://st7studio.ru/147/index.html
Тут, то чего я хотел бы добиться под jQ 1.11.1, т.е. зацыкленная, развёрнутая на всю высоту экрана, бегущая строка (там она выполнена в виде svg background файла).

Сейчас максимально облегчил тестовый файл, для удобства просмотра, запощу сюда, а потом пойду опробую местную песочницу.

Итак, index.html
<!DOCTYPE html>
<head>
	<link rel="stylesheet" type="text/css" href="main.css">
<!--
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-->
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

	<script src="main.js"></script>	
</head>
<body>

<div id="container">
	<div id="bg">	
	</div>
</div>

</body>
</html>


main.css
html {
	min-height:100%;
	height:100%;
}

body {
	min-height:100%;
	height:100%;
	margin:0;
	padding:0;	
}

#container {
	width:100%;
	min-height:100%;
	background:#333;
}

#bg {
	position:absolute;
	left:0%;
	top:0;
	width:100%;
	min-height:100%;
	background:url([url]http://st7studio.ru/147/images/name.svg[/url]) no-repeat;
	background-size:cover;
	z-index:2;
}


и собственно main.js
$(document).ready(function(){var i=0;while(i<100){
	$("#bg").animate({backgroundPosition: "100% top"}, {duration:100000});
	i++}
})
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Каскадный список + jquery 1.4.2 bobo123456 jQuery 0 02.04.2010 21:59