Анимация при смене фона
Здравствуйте.Есть код, меняет фон (картинку)
var img = 'fon.png';
$('.tab-in').css('background-image', function(index, oldValue){
if(oldValue==''){return img;}}).css('background-size','100% 100%')
Подскажите как этот процесс анимировать?Не понимаю к чему .animate прикрутить, никак не выходит. |
ureech,
сделайте макет и попробуйте ещё раз описать что хотите анимировать или попробуйте вместо .css('background-size','100% 100%') .animate({'background-size' : '100%'},1000) |
Вложений: 1
Вот табы состоящие из двух частей(см.вложение).По клику меняется содержимое правого блока и фон левого.К правому анимацию применил.Теперь нужно прикрутить анимацию к background левого блока.
Вот html
<div class="uitab">
<div class="tab-in">
<ul id="tabs">
<li><a class="tab" href="#tab-mus">Музыка</a></li>
........................................................
</ul>
</div>
здесь вкладки правого блока
.....................................
<div id="tab-mus" >
<div class="tab-in_1 animated">
</div>
</div>
.....................................
</div>
Вот js
$(function()
{
$('.tab').on('click', function(event)
{
event.preventDefault();
var id = this.getAttribute('href')
var img = 'url(/templates/red&black/images/music/'+id.slice(1)+'.png)';
$('.tab-in_1').not($('.tab-in_1', id).toggleClass('zoomIn')).removeClass('zoomIn')
$('.tab-in').css('background-image', function(index, oldValue){
if(oldValue==''){return img;}else{return img;}}).css('background-size','100% 100%')
}
);
}
);
Вариант .animate({'background-size' : '100%'},1000) не пойдёт. |
ureech,
а в css добавить transition? пока более ничем ... может если сделаите макет, кто подскажет. |
Что такое макет? И в css transition попробую, но думаю не пройдёт, так как фон появляется из js и всё это в динамики.
|
ureech,
макет это то что можно запустить тут или в любой песочнице http://plnkr.co/edit/?p=preview, а не части кода |
Хорошо, вот упрощённый вариант, суть та-же.Прикрутить анимацию к .nav
|
Цитата:
|
Цитата:
|
ureech,
:) а куда смотреть - то, чего делать - то, по вашей ссылке? где живёт nav? |
Ни хрена не понимаю.Вы сказали сделать макет, я сделал.Нормально поясните, что не так?
|
ureech,
ненашёл макета по вашей ссылке, открылась пустая песочница .... о уже код, счас гляну |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.tab-content
{
background: red;
padding: 20px 0;
color: #FFF;
}
.nav
{
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(https://www.instantcms.ru/upload/userfiles/4906/menubg-hover.jpg);
}</style>
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="https://getbootstrap.com/dist/js/bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.css"/>
<script type="text/javascript" src="https://documentcloud.github.io/backbone/backbone-min.js"></script>
<script type="text/javascript" src="https://documentcloud.github.io/underscore/underscore-min.js"></script>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a class="tab" href="#menubg-hover" data-toggle="tab">Главная</a></li>
<li><a class="tab" href="#menubg" data-toggle="tab">Профиль</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class=" tab-pane active" id="menubg-hover">Главная</div>
<div class=" tab-pane" id="menubg">Профиль</div>
</div>
<script>
$(function() {
$(".tab").on("click", function(event) {
var id = this.getAttribute("href");
var img = "url(https://www.instantcms.ru/upload/userfiles/4906/" + id.slice(1) + ".jpg)";
$(".nav").css({
"background-image": img,
"background-size": "0% 100%"
});
$({num: 0}).animate({num: 100},
{
step: function(x) {
$(".nav").css({
"background-size": (x | 0) + "% 100%"
})
},
duration: 1000
})
})
});</script></body></html>
|
Большое спасибо, за помощь.Единственное, что анимация к позицианированию по размеру в реале не подходит.Поправил так
$('.tab-in').css({'background-image' : img, 'background-size': '100% 100%','opacity':'0'}).animate({opacity:1}, 1000);
Ещё раз спасибо.В карму плюсануть не дают пока. |
ureech,
jquery не умеет анимировать двойные параметры сделал анимацию иначе, смотрите код выше. Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 18:53. |