Форум

ureech · #11 (**permalink**) 17.11.2015, 15:50

Ни хрена не понимаю.Вы сказали сделать макет, я сделал.Нормально поясните, что не так?

рони · #12 (**permalink**) 17.11.2015, 16:05

ureech,
ненашёл макета по вашей ссылке, открылась пустая песочница ....
о уже код, счас гляну

рони · #13 (**permalink**) 17.11.2015, 16:24

Сообщение от ureech

Прикрутить анимацию к .nav

вариант того как я вас понял ...

<!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>

ureech · #14 (**permalink**) 17.11.2015, 16:48

Большое спасибо, за помощь.Единственное, что анимация к позицианированию по размеру в реале не подходит.Поправил так

$('.tab-in').css({'background-image' : img, 'background-size': '100% 100%','opacity':'0'}).animate({opacity:1}, 1000);

Ещё раз спасибо.В карму плюсануть не дают пока.

рони · #15 (**permalink**) 17.11.2015, 16:51

ureech,
jquery не умеет анимировать двойные параметры
сделал анимацию иначе, смотрите код выше.

Сообщение от ureech

анимация к позицианированию по размеру в реале не подходит

это не понял, но вам виднее.

ureech · #16 (**permalink**) 17.11.2015, 17:08

Сообщение от рони

ureech,
jquery не умеет анимировать двойные параметры
сделал анимацию иначе, смотрите код выше.

это не понял, но вам виднее.

Прикольно. Я имею ввиду когда фон картинка, то при анимации она распадается на части.Но второй вариант уже лучше. Где нибудь применю.

Форум

Справочник

Discord чат

Курсы javascript