анимация jquery
Всем привет. Использую Bootstrap
<form action="" class="search" method="post"> <input type="text" class="field" id="search" placeholder="Поиск" style="z-index: 999;"/> <div class="btnp" style="z-index: 999;"> <input type="submit" value="Искать" /> </div> <div id="search_options" class="options" style="display: none; z-index: 111;"> <div class="btn-group" data-toggle="buttons-radio"> <button type="button" class="btn btn-inverse">в каталоге</button> <button type="button" class="btn btn-inverse active">везде</button> <button type="button" class="btn btn-inverse">в новостях</button> </div> </div> </form>
$('.search').hover(
function() {
$('#search_options').css('display', 'block');
$('#search_options').animate({marginLeft: "2px"}, 500);
},
function() {
$('#search_options').animate({marginLeft: "-302px"},500, function() {$('#search_options').css('display', 'none');});
}
);
Хочется, чтобы блок '#search_options' выезжал вправо какбы из-за блоков '.field' и '.btnp', но почему-то получается так, что z-index вообще в расчет не берется, и сначала появляется сверху блоков '.field' и '.btnp' блок '#search_options'... и начинается сдвигатся вправо поверх них - что не есть хорошо... пожалуйста помогите решить проблему |
Вложений: 4
скрины анимации:
|
bpystep,вариант без z-index, в конце скрипта танцы с бубнами, может кто подскажет как выровнять по вертикали без этого для ие и ff.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
div{
display: inline-block;
position: relative;
}
.btn-group{
left: -320px;
}
#search_options{
overflow: hidden;
}
</style>
</head>
<body>
<form action="" class="search" method="post">
<input type="text" class="field" id="search" placeholder="Поиск" >
<div class="btnp" >
<input type="submit" value="Искать">
</div>
<div id="search_options" class="options" >
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-inverse">в каталоге</button>
<button type="button" class="btn btn-inverse active">везде</button>
<button type="button" class="btn btn-inverse">в новостях</button>
</div>
</div>
</form>
<script>
$('.search').mouseenter(function()
{$('.btn-group').stop(true,true).animate({left: "2px", opacity: 1}, 600)
}
).mouseleave(function() {
$('.btn-group').stop(true,true).delay(500).animate({left: "-302px", opacity: 0}, 600);
}
)
var t = $('.btnp').position().top - $('.options').position().top ;
$('.options').css({'top':t} )
</script>
</body>
</html>
|
рони,
Спасибо, это как раз то что надо! А что не так с фф и ие? без этого прекрасно работает:
var t = $('.btnp').position().top - $('.options').position().top ;
$('.options').css({'top':t} )
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 17:18. |