Форум

bpystep · #1 (**permalink**) 17.07.2013, 23:46

Всем привет. Использую 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'... и начинается сдвигатся вправо поверх них - что не есть хорошо... пожалуйста помогите решить проблему

bpystep · #2 (**permalink**) 17.07.2013, 23:52

скрины анимации:

рони · #3 (**permalink**) 18.07.2013, 03:43

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>

bpystep · #4 (**permalink**) 18.07.2013, 20:01

рони,
Спасибо, это как раз то что надо! А что не так с фф и ие?
без этого прекрасно работает:

var t = $('.btnp').position().top -  $('.options').position().top ;
    $('.options').css({'top':t} )

рони · #5 (**permalink**) 18.07.2013, 20:23

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

А что не так с фф и ие?

#search_options на 8px выше инпутов -- ваше css видимо выравнивает это.

bpystep · #6 (**permalink**) 18.07.2013, 20:26

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

#search_options на 8px выше инпутов -- ваше css видимо выравнивает это.

а всме понял, спасибо еще раз!

Форум

Справочник

Discord чат

Курсы javascript