Показать сообщение отдельно
  #3 (permalink)  
Старый 18.07.2013, 03:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

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>
Ответить с цитированием