Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.08.2012, 16:45
Новичок на форуме
Отправить личное сообщение для More916 Посмотреть профиль Найти все сообщения от More916
 
Регистрация: 22.08.2012
Сообщений: 6

Изменнение размеров блоков при наведение
Здравствуйте! Не работает jQuery скрипт, а именно:
При наведение на блок с id "zoom", он увеличивается (+показывается скрытый в нем (display: none) текст), но срабатывает скрипт, почему то, только на первом блоке! А все остальные как будто бы с другим id
Вот код скрипт:

$(function(){
	$('#zoom').hover(function(){
			$(this).stop().animate({width:"130px",height:"130px",left:"-40px",top:"-40px"}, 400);
			$(this).find('p').fadeIn("slow"); 
		},
		function(){
			$(this).stop().animate({width:"50px",height:"50px",left:"0",top:"0"}, 400);
			$(this).find('p').css('display','none');
		});
});


И часть HTML кода:
<div id="menu">
<div id="zoom"><p>Меню</p></div>
<div id="zoom"><p>Меню</p></div>
</div>
<div id="menu">
<div id="zoom"><p>Меню</p></div>
<div id="zoom"><p>Меню</p></div>
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 22.08.2012, 16:52
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

More916,
Id - по определению считается уникальным элементом на странице - второе даже не ищецо

Используйте class
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
 .menu {
 border:red solid 1px;

}
 .zoom {
 border:blue solid 1px;

}
</style>



<script type="text/javascript">
$(function(){
	$('.zoom').hover(function(){
			$(this).stop().animate({width:"130px",height:"130px",left:"-40px",top:"-40px"}, 400);
			$(this).find('p').fadeIn("slow"); 
		},
		function(){
			$(this).stop().animate({width:"50px",height:"50px",left:"0",top:"0"}, 400);
			$(this).find('p').css('display','none');
		});
});

</script>



<div class="menu">
<div class="zoom"><p>Меню</p></div>
<div class="zoom"><p>Меню</p></div>
</div>
<div class="menu">
<div class="zoom"><p>Меню</p></div>
<div class="zoom"><p>Меню</p></div>
</div>
Ответить с цитированием
  #3 (permalink)  
Старый 22.08.2012, 17:00
Новичок на форуме
Отправить личное сообщение для More916 Посмотреть профиль Найти все сообщения от More916
 
Регистрация: 22.08.2012
Сообщений: 6

Благодарю, все заработало (а ведь все верно, в исходнике, из которого я взял скрипт увеличения, были именно классы а не id)
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2014, 13:01
Новичок на форуме
Отправить личное сообщение для rostisslav Посмотреть профиль Найти все сообщения от rostisslav
 
Регистрация: 20.01.2014
Сообщений: 1

Добрый кто подскажет. Интересует подобное но.
Допустим есть блока по 2 в ряд. При наведении мышки на один Он увеличивается ( пусть будет 20px "ш\в") три блока в свою очередь уменьшаются. Спасибо
Ответить с цитированием
  #5 (permalink)  
Старый 20.07.2015, 10:41
Новичок на форуме
Отправить личное сообщение для bamser Посмотреть профиль Найти все сообщения от bamser
 
Регистрация: 20.07.2015
Сообщений: 1

Здравствуйте
а как сделать похожее...но чтоб блок наезжал на другие...а не сдвигался.
Вот сейчас так: http://www.obo-v-sem.ru/billing/
А нужно : http://www.obo-v-sem.ru/svet/istochn...-svetodiodnye/
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Событие при наведение мыши, которое раскроет содержимое блока (элемента)... aklak Элементы интерфейса 3 27.03.2012 10:30
Изменение позиции блоков при увеличении изображения vyrtime Общие вопросы Javascript 2 14.10.2011 11:24
Нужен скрипт, подсвечивающий ссылку при наведение на картинку Vatrushka Общие вопросы Javascript 2 26.04.2011 08:02
Просмоторщик галереи при наведение мышкой. MissSixty Элементы интерфейса 2 06.05.2010 18:14
Динамическое изменение размеров блока при наведении мыши! Viktor ------- Общие вопросы Javascript 7 05.05.2009 18:13