|
Сообщение от 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>