16.11.2014, 21:44
|
|
Новичок на форуме
|
|
Регистрация: 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.
|
|
16.11.2014, 21:56
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
timatey,
у вас точно 1 скрипт jQuery а не в придачу с Easing
может макет сделаите, и опишите что хотите анимировать?
,specialEasing:{backgroundPo sition:'linear'}
может убрать?
|
|
16.11.2014, 22:20
|
|
Новичок на форуме
|
|
Регистрация: 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.
|
|
16.11.2014, 22:30
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
timatey,
можно тут или в песочница
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
16.11.2014, 22:37
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
|
|
16.11.2014, 22:51
|
|
Новичок на форуме
|
|
Регистрация: 16.11.2014
Сообщений: 6
|
|
http://jsfiddle.net/timatey/3gb7c3xz/5/
Вот весь код. Единственное там нет у них jQ 1.4.2 и подобных, соответственно пример не работает, у меня же на 1.4.2 и 1.4.3 бакграунд (текст), развёрнутый на всю высоту экрана плавно плывёт справа налево.
|
|
16.11.2014, 22:56
|
|
Новичок на форуме
|
|
Регистрация: 16.11.2014
Сообщений: 6
|
|
|
|
|
16.11.2014, 23:26
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
Сообщение от timatey
|
|
Спасибо, сейчас почитаю.
|
можно нечитать код устарел |
|
16.11.2014, 23:46
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
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.
|
|
16.11.2014, 23:56
|
|
Новичок на форуме
|
|
Регистрация: 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++}
})
|
|
|
|
