Миграция скрипта из трёх строк (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,
у вас точно 1 скрипт jQuery а не в придачу с Easing может макет сделаите, и опишите что хотите анимировать? ,specialEasing:{backgroundPo sition:'linear'} может убрать? |
Цитата:
$(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,
можно тут или в песочница Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
|
http://jsfiddle.net/timatey/3gb7c3xz/5/
Вот весь код. Единственное там нет у них jQ 1.4.2 и подобных, соответственно пример не работает, у меня же на 1.4.2 и 1.4.3 бакграунд (текст), развёрнутый на всю высоту экрана плавно плывёт справа налево. |
Цитата:
|
Цитата:
|
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>
|
Цитата:
Попробовал заменить моё
.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++}
})
|
| Часовой пояс GMT +3, время: 14:37. |