Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.07.2013, 23:46
Профессор
Отправить личное сообщение для bpystep Посмотреть профиль Найти все сообщения от bpystep
 
Регистрация: 06.08.2010
Сообщений: 161

анимация 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'... и начинается сдвигатся вправо поверх них - что не есть хорошо... пожалуйста помогите решить проблему
Ответить с цитированием
  #2 (permalink)  
Старый 17.07.2013, 23:52
Профессор
Отправить личное сообщение для bpystep Посмотреть профиль Найти все сообщения от bpystep
 
Регистрация: 06.08.2010
Сообщений: 161

скрины анимации:
Изображения:
Тип файла: jpg 1.JPG (10.5 Кб, 7 просмотров)
Тип файла: jpg 2.JPG (11.6 Кб, 6 просмотров)
Тип файла: jpg 3.JPG (13.3 Кб, 5 просмотров)
Тип файла: jpg 4.JPG (13.2 Кб, 4 просмотров)
Ответить с цитированием
  #3 (permalink)  
Старый 18.07.2013, 03:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #4 (permalink)  
Старый 18.07.2013, 20:01
Профессор
Отправить личное сообщение для bpystep Посмотреть профиль Найти все сообщения от bpystep
 
Регистрация: 06.08.2010
Сообщений: 161

рони,
Спасибо, это как раз то что надо! А что не так с фф и ие?
без этого прекрасно работает:
var t = $('.btnp').position().top -  $('.options').position().top ;
    $('.options').css({'top':t} )
Ответить с цитированием
  #5 (permalink)  
Старый 18.07.2013, 20:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от bpystep
А что не так с фф и ие?
#search_options на 8px выше инпутов -- ваше css видимо выравнивает это.
Ответить с цитированием
  #6 (permalink)  
Старый 18.07.2013, 20:26
Профессор
Отправить личное сообщение для bpystep Посмотреть профиль Найти все сообщения от bpystep
 
Регистрация: 06.08.2010
Сообщений: 161

Сообщение от рони Посмотреть сообщение
#search_options на 8px выше инпутов -- ваше css видимо выравнивает это.
а всме понял, спасибо еще раз!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Анимация при подгрузке изображения на jquery SunYang AJAX и COMET 3 18.06.2012 18:55
JQuery, анимация для нескольких элементов сразу, возможно ли? Logo jQuery 21 29.05.2012 21:50
Анимация на jQuery Mukhtar AJAX и COMET 1 11.05.2012 16:53
JQuery анимация 3ukk jQuery 9 07.12.2011 19:06
Не работает анимация jquery hugi jQuery 1 30.08.2010 20:25