Проблема при выполнении hover
мой живой пример
_mmns.ру/files/moo2/ понаводите на картинки после over и out почему второй раз повторяется цикл у элемента? (еще раз over и out) что делаю не так? спасибо. только сегодня начал изучать... |
ребят тут кто-нибудь есть? =)
.... не подскажите посещаемые форумы по jquery? |
ребят? грустно как-то не понимаю.
|
http://docs.jquery.com/Events/hover
« Additionally, checks are in place to see if the mouse is still within the specified element itself (for example, an image inside of a div), and if it is, it will continue to 'hover', and not move out (a common error in using a mouseout event handler). » Подозреваю, дело в этом. Поставьте fadeOut на mouseover, а fadeIn на mouseleave. Или делайте проверку внутри функций. |
hogart спасибо за отклик.
не совсем понимаю правда делаю
$(document).ready(function(){
$("a img").mouseover(function(){
$(this).fadeOut(500);
});
$("a img").bind("mouseleave",function(){
$(this).fadeIn(500);
});
});
нифига same, но добавляю к mouseleave mouseenter ("mouseenter mouseleave") то не повторяется, но fadeIn сразу срабатывает в общем подскажите я сижу неделю уже с этим 8( спасибо. |
вот получилось вот так (все здесь же _mmns.ру/files/moo2/)
$(document).ready(function(){
$("ul li").bind("mouseenter",function(){
$("a img", this).fadeOut(500).bind("mouseleave",function(){
$("a img").fadeIn(500);})
});
});
то есть можно по разному цепочки делать, не только ховером, маусином и маусаутом реализовывать? нашел в яндексе единственую тему как раз http://www.fedya.net/articles/javascript/mouseenter я правильно сделал? вы уж простите мне это важно понять тк только начал работать с javascript |
Рано зарадывался.. в лисе баг у меня
после fadeOut сразу срабатывает fadeIn 8( |
Есть какая-то тонкость в событиях onmouseover и onmouseout, насколько я помню. Погуглите по этим словам.
|
хммм... не поможете я так понял..
причем здесь onmouseover и onmouseout? вы опечатались? mouseenter И mouseleave у меня только ведь в коде жаль что помощи нет на данном форуме. |
namez, а можно еще раз выложить страницу?
|
Цитата:
http://mmns.ru/files/moo2/ |
проблема mouseover/mouseout... Допустим есть два div'а - внутренний и внешний. На внешний повешены обработчики mouseover/mouseout. При пересечении границы внутреннего div'а произойдут 2 события mouseout+mouseover. Поэтому jQuery добавила mouseleave и mouseenter. Сейчас посмотрю, что у тебя там по ссылке
|
$("a img").bind("mouseenter", function() {
$(this).fadeOut(500);
});
$("a img").bind("mouseleave", function() {
$(this).fadeIn(500);
});
здесь проблема в том, что в результате fadeOut элемент становится скрытым. И тут начинаются приколы. Толком не разобрался, но странно получается, по-разному (в разных браузерах) и не так как требовалось. А надо так (насколько я понял):
$("a img").bind("mouseenter", function() {
$(this).fadeOut(500).fadeIn(500);
});
а, даже не так надо, подумаю |
$("a img").bind("mouseenter", function() {
$(this).fadeTo(500, 0.1);
});
$("a img").bind("mouseleave", function() {
$(this).fadeTo(500, 1);
});
? ;-) в данном случае можно даже mouseOver/mouseOut |
Цитата:
x-yuri cпасибо! Цитата:
fadeTo оказывается... ну уж новичек я :o ф да, тут как раз fadeTo и нужен получается по моей задумке. еще раз спасибо за отклик! |
Я уже сталкивался с этой проблемой.. Решил вот так http://javascript.ru/forum/jquery/24...animaciya.html
|
SashaBorandi, а это уже следующая проблема. О которой автор еще не знает
Я бы так сделал:
function onMouseEnterLeave( e ) {
if( $.data(this, 'isRunning') )
return;
$.data( this, 'isRunning', true );
var el = this;
$(this).fadeTo(500, e.data, function() {
$.data( el, 'isRunning', false );
});
}
$("a img").bind("mouseenter", 0.1, onMouseEnterLeave);
$("a img").bind("mouseleave", 1, onMouseEnterLeave);
меня только беспокоит не будет ли утечек памяти. Может лучше сделать
function onMouseEnterLeave( e ) {
if( $.data(this, 'isRunning') )
return;
$.data( this, 'isRunning', true );
var id = this.id;
$(this).fadeTo(500, e.data, function() {
$.data( $('#'+id), 'isRunning', false );
});
}
$("a img").bind("mouseenter", 0.1, onMouseEnterLeave);
$("a img").bind("mouseleave", 1, onMouseEnterLeave);
только id всем пунктам меню надо будет назначить |
Цитата:
сейчас у меня: (http://mmns.ru/files/moo2/)
$(document).ready(function(){
$("li a img").bind("mouseenter", function() {
$(this).fadeTo(500, 0.1);
});
$("li a img").bind("mouseleave", function() {
$(this).fadeTo(500, 1);
});
});
<style>
img {border:0;}
ul {width:265px; height:79px}
ul li{float:left; display:block}
#forum {height:23px; width:76px; background:url(images/forum_over.jpg) top left no-repeat; }
#contact {height:23px; width:95px; background:url(images/contact_over.jpg) top left no-repeat;}
</style>
<ul><li id="forum"><a href="/forum" ><img src="images/forum.jpg" alt="" /></a></li><li id="contact"><a href="/contacts" ><img src="images/contact.jpg" alt="" /></a></li></ul>
спасибо. |
а мои варианты - не рабочие? Их два, второй подразумевает назначение всем пунктам меню (img) атрибутов id
|
Цитата:
применяю второй вариант, все тут же _mmns.ru/files/moo2/ наведение работает только с одним меню и без fade out в общем не понял вас немножко где рабочий вариант, что забыл сделать? про id что имеется в виду, если добавляю к картинкам id то не работает в таком случае fadeOut и еще чтобы понять - мы же говорим о зацикливании - то есть если мышкой много раз понаводить по менюшкам то эффект повторится n' раз? спасибо за помощь тк я не понимаю в решении данной проблемы. |
namez, да, у меня во втором варианте ошибка: $('#'+id) -> $('#'+id)[0]
но ты разберись, как оно раотает, а то мало ли чего я тебе тут насоветовал ;-) |
исправил но работает с глюками ведь все равно..
теперь зацикливания нету но остается fadeIn... да и как без id к картинке обойтись - а если например там в li будет span c бекграундом? то есть конструкция вида <li><a href><span></span></a> пытаюсь разобраться но пока глюк что-то на глюке у решения зацикливания 8( |
да, не учел еще один нюанс
function onMouseEnterLeave( e ) {
var to = { mouseenter: 0.1, mouseleave: 1 };
if( $.data(this, 'isRunning') ) {
$.data( this, 'last', e.type );
return;
}
$.data( this, 'isRunning', true );
$.data( this, 'last', null );
var id = this.id;
var type = e.type;
$(this).fadeTo(500, to[ e.type ], function() {
var last = $.data($('#'+id)[0], 'last');
if( last && (type != last) )
setTimeout( function() {
$('#'+id).trigger( last );
}, 0 );
$.data( $('#'+id)[0], 'isRunning', false );
});
}
$("a img").bind("mouseenter", onMouseEnterLeave);
$("a img").bind("mouseleave", onMouseEnterLeave);
но стоит задуматься, а надо ли это вообще |
Цитата:
|
да x-yuri теперь все вроде ок! спасибо бальшое =)
насчет задуматься если правильно понял вас: вот реализация на mootools http://mmns.ru/files/moo/ cкажите почему такая разница в кол-ве кода? спасибо за помощь, с уважением Cергей. |
можно еще так (без id, заметь)
function onMouseEnterLeave( e ) {
var to = { mouseenter: 0.1, mouseleave: 1 };
if( $.data(this, 'isRunning') ) {
$.data( this, 'last', e.type );
return;
}
$.data( this, 'isRunning', true );
$.data( this, 'last', null );
var type = e.type;
$(this).fadeTo(500, to[ e.type ], function() {
var last = $.data( this, 'last');
if( last && (type != last) ) {
var img = this;
setTimeout( function() {
$(img).trigger( last );
}, 0 );
}
$.data( this, 'isRunning', false );
});
}
а можно так
$("a img").bind("mouseenter", function() {
$(this).stop().fadeTo(500, 0.1);
});
$("a img").bind("mouseleave", function() {
$(this).stop().fadeTo(500, 1);
});
или аналог mootools-варианта
$("a img").bind("mouseenter", function() {
$(this).stop().fadeTo(0, 1).fadeTo(500, 0.1);
});
$("a img").bind("mouseleave", function() {
$(this).stop().fadeTo(0, 0.1).fadeTo(500, 1);
});
и собственно вопрос: "почему такая разница в количестве кода?" Но в любом случае сравнивать фреймворки надо не по количеству кода одной задачи Под задуматься я подразумевал, что именно надо: 1) анимации выполняются все и до конца, 2) пропускаются промежуточные анимации, 3) очередное событие прерывает текущую анимацию, 4) очередное событие прерывает текущую анимацию и начинает новую с ее "начала" (mootools-вариант) |
| Часовой пояс GMT +3, время: 17:03. |