Проблема с show()/hide()
Всем привет. Возникла проблема при использовании функции:
<script type="text/javascript">
$('#kateg-fon').hover(function() {
$('#kat-dop-opt').show(150);
},
function() {
$('#kat-dop-opt').hide(150);
});
</script>
Суть скрипта заключается в том, что при наведении курсора на кнопку открывается дополнительная инфа. Если убираем курсор с кнопки - инфа закрывается. Это работает. Но проблема в следующем... При многоразовом "Наведении/выведении" "туда, сюда" курсора на кнопку инфа начинает открываться, закрываться, открываться, закрываться, и т. д. Она будет открываться и закрываться столько раз, сколько раз мы прошли курсором по кнопке. Как остановить выполнение функции? Как только мы убираем курсор с кнопки. Заранее спасибо. |
(function () {
var callee = arguments.callee;
$("#kateg-fon").one("mouseover mouseout", function () {
$("#kat-dop-opt")[ event.type == "mouseover" ? "show" : "hide" ](150, callee);
});
})();
|
Спасибо, но не помого. Почти все так же.
|
Я знаю, что "вконтакте" подобная проблема решена. Вот часть их скрипта.
Тут при наведении мышки изменяется цвет фона кнопки
var close_button = ge('im_x');
var popup_button = ge('im_popup');
var sound_button = ge('im_sound');
var fadeToColor = function(color, master) {
return function() {
this.fading = master ? true : false;
animate(this, {backgroundColor: color}, 200);
}
}
addEvent(close_button, 'mouseover', fadeToColor('#FFFFFF'));
addEvent(close_button, 'mouseout', fadeToColor('#9CB8D4'));
addEvent(close_button, 'click', im.popup ? function() { window.close(); } : winBoxes.im.hide);
if (im.popup) {
hide('im_popup_button');
im.fix_popup();
addEvent(window, 'onorientationchange' in window ? 'orientationchange' : 'resize', im.fix_popup);
} else {
addEvent(popup_button, 'mouseover', fadeToColor('#FFFFFF'));
addEvent(popup_button, 'mouseout', fadeToColor('#9CB8D4'));
addEvent(popup_button, 'click', im.go_popup);
if (window.im_check) {
winBoxes.im.setOptions({onHide: function() {
window.im_ts = im.ts;
setTimeout(window.im_check, 1000);
}});
}
}
addEvent(sound_button, 'mouseover', fadeToColor('#FFFFFF'));
addEvent(sound_button, 'mouseout', fadeToColor('#9CB8D4'));
addEvent(sound_button, 'click', function() {
if (im.sound_off) {
im.sound_off = false;
ge('im_sound').className = '';
} else {
im.sound_off = true;
ge('im_sound').className = 'off';
}
});
|
var O = $("#kateg-fon"), S = $("#kat-dop-opt");
O.one("mouseover", function H() {
S.show(150, function () {
O.one("mouseout", function (event) {
if ( $(event.relatedTarget).closest("#kateg-fon").length === 1 ) return O.one("mouseout", arguments.callee);
S.hide(150, function () {
O.one("mouseover", H);
});
});
});
});
|
Спасибо большое! Сейчас все отлично работает!)
|
Для этого есть событие hover():
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var span = $('span');
$('div').hover(
function() {span.show()},
function() {span.hide()}
);
});
</script>
<div>text</div>
<span style="display: none;">what is it?</span>
|
monolithed, у ТС анимация, а у Вас простое скрытие/показывание.
|
Цитата:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('div').hover(function() {
$('p').animate({
height: 'toggle',
opacity: "toggle"
}, {
queue: false,
duration: 500
});
});
});
</script>
<style type="text/css">
p {
background: red;
width: 100px;
height: 100px;
}
</style>
<div>text</div>
<p style="display: none;"></p>
|
Цитата:
|
| Часовой пояс GMT +3, время: 01:27. |