Плавное появление блока при наведении курсором на ссылку - JavaScript, Ajax

danilkins · 02.12.2013, 15:17

Вот рабочий код(взятый на этом форуме:

Код HTML:

<!DOCTYPE >
<head>
<style type="text/css">
a:link,  a:visited {text-decoration:none; color:#ff0000;}
a:hover,  a:active {text-decoration:underline;}
#here {display:none;}
table {margin:0 auto;}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu').hover(function(){
    $('#here').fadeIn("slow");}).mouseout(function(){
        $('#here').fadeOut("slow");});
});
</script>
</head>
<body>
<a href="#" class="menu" onMouseOver="a_hover();"  onMouseOut="a_out();">hoverme</a>
<table cellpadding="0" cellspacing="0">
    <tr>
        <td id="here">
            html.by
        </td>
    </tr>
</table>
</body>
</html>

Вопрос следующий: как сделать так чтобы при 10 кратном наведении на ссылку блок контент(который отображается при наведении на эту ссылку) не отображался 10 кратно!!?? а только один раз. помогите , пожалуйста!

Naive · 02.12.2013, 15:47

Код:

.stop()

вставь перед .fadeIn

а вообще, код какой-то кривоватый, .hover() вторым параметром может принимать функцию для mouseout

danilkins · 02.12.2013, 15:53

Подскажите, пожалуйста, как не коряво сделать? Самому не под силу справиться с этим. А все что нужно только это. Спасибо заранее.

uberchel · 02.12.2013, 15:54

Код:

<script type="text/javascript">
$(document).ready(function(){
$('.menu').hover(function(){
    $('#here').stop().fadeIn("slow");
    }, function () {
        $('#here').stop().fadeOut("slow");
   });
   });
</script>

danilkins · 02.12.2013, 16:02

Спасибо. Это то, что мне нужно было. Еще раз благодарю!

danilkins · 02.12.2013, 16:45

Еще такой вопрос по написанному Вами коду.

Если навести и убрать курсор в тот момент когда блок наполовину появился то его дальнейшее отображение происходит на половину, то есть таким как он впервые успел наполовину отобразиться. А если быстро по ссылке поскользить то блок и вовсе может не отображаться.

Как устранить этот косяк?

02.12.2013, 15:17	#1
danilkins Пользователь Регистрация: 02.12.2013 Сообщений: 11	Плавное появление блока при наведении курсором на ссылку Вот рабочий код(взятый на этом форуме: Код HTML: <!DOCTYPE > <head> <style type="text/css"> a:link, a:visited {text-decoration:none; color:#ff0000;} a:hover, a:active {text-decoration:underline;} #here {display:none;} table {margin:0 auto;} </style> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.menu').hover(function(){ $('#here').fadeIn("slow");}).mouseout(function(){ $('#here').fadeOut("slow");}); }); </script> </head> <body> <a href="#" class="menu" onMouseOver="a_hover();" onMouseOut="a_out();">hoverme</a> <table cellpadding="0" cellspacing="0"> <tr> <td id="here"> html.by </td> </tr> </table> </body> </html> Вопрос следующий: как сделать так чтобы при 10 кратном наведении на ссылку блок контент(который отображается при наведении на эту ссылку) не отображался 10 кратно!!?? а только один раз. помогите , пожалуйста! Интернет-магазин спортивного питания "WILDPAIN"

02.12.2013, 15:47	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Код: `.stop()` вставь перед .fadeIn а вообще, код какой-то кривоватый, .hover() вторым параметром может принимать функцию для mouseout Alar, верни репу!

02.12.2013, 15:53	#3
danilkins Пользователь Регистрация: 02.12.2013 Сообщений: 11	Подскажите, пожалуйста, как не коряво сделать? Самому не под силу справиться с этим. А все что нужно только это. Спасибо заранее. Интернет-магазин спортивного питания "WILDPAIN"

02.12.2013, 15:54	#4
uberchel Участник клуба Регистрация: 19.01.2009 Сообщений: 1,457	Код: `<script type="text/javascript"> $(document).ready(function(){ $('.menu').hover(function(){ $('#here').stop().fadeIn("slow"); }, function () { $('#here').stop().fadeOut("slow"); }); }); </script>`

02.12.2013, 16:02	#5
danilkins Пользователь Регистрация: 02.12.2013 Сообщений: 11	Спасибо. Это то, что мне нужно было. Еще раз благодарю! Интернет-магазин спортивного питания "WILDPAIN"

02.12.2013, 16:45	#6
danilkins Пользователь Регистрация: 02.12.2013 Сообщений: 11	Еще такой вопрос по написанному Вами коду. Если навести и убрать курсор в тот момент когда блок наполовину появился то его дальнейшее отображение происходит на половину, то есть таким как он впервые успел наполовину отобразиться. А если быстро по ссылке поскользить то блок и вовсе может не отображаться. Как устранить этот косяк? Интернет-магазин спортивного питания "WILDPAIN"

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Плавное движение липкого блока при скроллинге	xDyPx	JavaScript, Ajax	9	23.01.2013 09:13
как менять ссылку при наведении на не курсором?	Luca Brasi	HTML и CSS	3	29.12.2012 23:13
появление изображения при наведении	moneyman	HTML и CSS	8	21.06.2012 14:58
Плавное появление картинки при наведении мыши на ссылку	CodeNOT	JavaScript, Ajax	7	28.04.2011 17:15
Звук при наведении мышки на ссылку	BangBangFM	HTML и CSS	5	07.09.2008 15:14