Ни хрена не понимаю.Вы сказали сделать макет, я сделал.Нормально поясните, что не так?
|
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, время: 06:07. |