19.02.2009, 16:23
|
Аспирант
|
|
Регистрация: 21.11.2008
Сообщений: 52
|
|
Сообщение от x-yuri
|
namez, а можно еще раз выложить страницу?
|
буквы ру заменил просто
http://mmns.ru/files/moo2/
|
|
19.02.2009, 16:33
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
проблема mouseover/mouseout... Допустим есть два div'а - внутренний и внешний. На внешний повешены обработчики mouseover/mouseout. При пересечении границы внутреннего div'а произойдут 2 события mouseout+mouseover. Поэтому jQuery добавила mouseleave и mouseenter. Сейчас посмотрю, что у тебя там по ссылке
|
|
19.02.2009, 16:59
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
$("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);
});
а, даже не так надо, подумаю
|
|
19.02.2009, 17:08
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
$("a img").bind("mouseenter", function() {
$(this).fadeTo(500, 0.1);
});
$("a img").bind("mouseleave", function() {
$(this).fadeTo(500, 1);
});
? ;-)
в данном случае можно даже mouseOver/mouseOut
|
|
19.02.2009, 17:29
|
Аспирант
|
|
Регистрация: 21.11.2008
Сообщений: 52
|
|
Сообщение от x-yuri
|
$("a img").bind("mouseenter", function() {
$(this).fadeTo(500, 0.1);
});
$("a img").bind("mouseleave", function() {
$(this).fadeTo(500, 1);
});
? ;-)
в данном случае можно даже mouseOver/mouseOut
|
=) Вот она золотая серединка... :o
x-yuri cпасибо!
Цитата:
|
что в результате fadeOut элемент становится скрытым. И тут начинаются приколы
|
я и так и эдак уже.. хотя это заметил..
fadeTo оказывается... ну уж новичек я :o ф
да, тут как раз fadeTo и нужен получается по моей задумке.
еще раз спасибо за отклик!
|
|
20.02.2009, 10:38
|
|
Интересующийся
|
|
Регистрация: 25.12.2008
Сообщений: 16
|
|
Я уже сталкивался с этой проблемой.. Решил вот так Цикличность анимация?
|
|
20.02.2009, 11:24
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
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 всем пунктам меню надо будет назначить
|
|
22.02.2009, 12:22
|
Аспирант
|
|
Регистрация: 21.11.2008
Сообщений: 52
|
|
Сообщение от x-yuri
|
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>
спасибо.
|
|
23.02.2009, 13:20
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
а мои варианты - не рабочие? Их два, второй подразумевает назначение всем пунктам меню (img) атрибутов id
|
|
23.02.2009, 17:47
|
Аспирант
|
|
Регистрация: 21.11.2008
Сообщений: 52
|
|
Сообщение от x-yuri
|
а мои варианты - не рабочие? Их два, второй подразумевает назначение всем пунктам меню (img) атрибутов id
|
сейчас попробую обьяснить -
применяю второй вариант, все тут же _mmns.ru/files/moo2/
наведение работает только с одним меню и без fade out
в общем не понял вас немножко где рабочий вариант, что забыл сделать?
про id что имеется в виду, если добавляю к картинкам id то не работает в таком случае fadeOut
и еще чтобы понять -
мы же говорим о зацикливании - то есть если мышкой много раз понаводить по менюшкам то эффект повторится n' раз?
спасибо за помощь тк я не понимаю в решении данной проблемы.
|
|
|
|