Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Изменнение размеров блоков при наведение (https://javascript.ru/forum/jquery/30986-izmennenie-razmerov-blokov-pri-navedenie.html)

More916 22.08.2012 17:45

Изменнение размеров блоков при наведение
 
Здравствуйте! Не работает 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>

Deff 22.08.2012 17:52

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>

More916 22.08.2012 18:00

Благодарю, все заработало (а ведь все верно, в исходнике, из которого я взял скрипт увеличения, были именно классы а не id)

rostisslav 20.01.2014 15:01

Добрый кто подскажет. Интересует подобное но.
Допустим есть блока по 2 в ряд. При наведении мышки на один Он увеличивается ( пусть будет 20px "ш\в") три блока в свою очередь уменьшаются. Спасибо

bamser 20.07.2015 10:41

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


Часовой пояс GMT +3, время: 19:04.