Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Анимация при смене фона (https://javascript.ru/forum/dom-window/59574-animaciya-pri-smene-fona.html)

ureech 17.11.2015 09:51

Анимация при смене фона
 
Здравствуйте.Есть код, меняет фон (картинку)
var img = 'fon.png';
$('.tab-in').css('background-image', function(index, oldValue){
 if(oldValue==''){return img;}}).css('background-size','100% 100%')

Подскажите как этот процесс анимировать?Не понимаю к чему .animate прикрутить, никак не выходит.

рони 17.11.2015 10:36

ureech,
сделайте макет и попробуйте ещё раз описать что хотите анимировать
или попробуйте вместо .css('background-size','100% 100%')
.animate({'background-size' : '100%'},1000)

ureech 17.11.2015 11:27

Вложений: 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) не пойдёт.

рони 17.11.2015 11:39

ureech,
а в css добавить transition?
пока более ничем ... может если сделаите макет, кто подскажет.

ureech 17.11.2015 12:15

Что такое макет? И в css transition попробую, но думаю не пройдёт, так как фон появляется из js и всё это в динамики.

рони 17.11.2015 12:22

ureech,
макет это то что можно запустить тут или в любой песочнице http://plnkr.co/edit/?p=preview, а не части кода

ureech 17.11.2015 14:09

Хорошо, вот упрощённый вариант, суть та-же.Прикрутить анимацию к .nav

рони 17.11.2015 14:23

Цитата:

Сообщение от ureech
Хорошо, вот упрощённый вариант

не осилил

ureech 17.11.2015 14:53

Цитата:

Сообщение от рони (Сообщение 396514)
не осилил

В смысле с моей стороны что то не так, или не выходит просто?

рони 17.11.2015 15:18

ureech,
:) а куда смотреть - то, чего делать - то, по вашей ссылке? где живёт nav?


Часовой пояс GMT +3, время: 18:29.