Efeitos gerados por jQuery estão travando

[rikaschmitt 54]

Boa tarde pessoal.

 

Utilizo um jquery para fazer efeito de "aparecer" uma div ao passar o mouse sobre uma outra div. Essa div aparece "rolando" para baixo, um efeito simples. Na verdade, são 4 divs, uma ao lado da outra, e todas elas apresentam esse efeito ao passar o mouse.

 

O problema é: o efeito está travando. Eu passo o mouse em uma, depois em outra e de repente, trava. A div não aparece mais, ou então, aparece até a metade.

 

Por que acontece isso? Como arrumo?

 

 

 

jQuery:

var SemConflito = jQuery.noConflict();

//// Efeito das promoções
var timer1;
SemConflito("#lp-1").on('mouseover', function(){
timer = setTimeout(function(){
SemConflito("#lp-1-hover").stop().slideDown({duration: 400, easing: 'easeInCubic'}); }, 200);
});
var timer2;
SemConflito("#lp-2").on('mouseenter', function(){
timer = setTimeout(function(){
SemConflito("#lp-2-hover").stop().slideDown({duration: 400, easing: 'easeInCubic'}); }, 200);
});
var timer3;
SemConflito("#lp-3").on('mouseenter', function(){
timer = setTimeout(function(){
SemConflito("#lp-3-hover").stop().slideDown({duration: 400, easing: 'easeInCubic'}); }, 200);
});
var timer4;
SemConflito("#lp-4").on('mouseenter', function(){
timer = setTimeout(function(){
SemConflito("#lp-4-hover").stop().slideDown({duration: 400, easing: 'easeInCubic'}); }, 200);
});


SemConflito("#lp-1-hover").on('mouseleave', function(){ SemConflito("#lp-1-hover").stop(); clearTimeout(timer1); SemConflito("#lp-1-hover").fadeOut(100); }); 

SemConflito("#lp-2-hover").on('mouseleave', function(){ SemConflito("#lp-2-hover").stop(); clearTimeout(timer2); SemConflito("#lp-2-hover").fadeOut(100); }); 

SemConflito("#lp-3-hover").on('mouseleave', function(){ SemConflito("#lp-3-hover").stop(); clearTimeout(timer3); SemConflito("#lp-3-hover").fadeOut(100); }); 

SemConflito("#lp-4-hover").on('mouseleave', function(){ SemConflito("#lp-4-hover").stop(); clearTimeout(timer4); SemConflito("#lp-4-hover").fadeOut(100); });

O css//html é simples, há uma div normal de id #lp-n° e uma outra div "oculta" com id #lp-n°-hover

[rikaschmitt 54]

O código tinha um pequeno erro: as variáveis "timer" não estavam numeradas, então numerei.

 

Mesmo assim, o problema continua.

 

Na verdade, acredito que seja porque eu passo o mouse rápido sobre as divs, e frequentemente. O sistema deve "bugar" de tanto hover ahahahaha...

[Marlon Pacheco 132]

Porque não fazer com css?

[rikaschmitt 54]

Porque não fazer com css?

 

Até pensei, mas já to com tudo pronto praticamente agora.

Não vou refazer. Além disso, animações com CSS não é suportada por alguns IE antigos.. e.. infelizmente, preciso que o site funcione em todos.

 

 

É estranho. Não sei por quê trava. Ele simplesmente para de funcionar, ou então, ele trava a animação na metade, como se pré-determinasse a "height" da div.. dai o efeito hover faz a div ficar pela metade.

[rikaschmitt 54]

Alguém sabe desse problema?

 

Ainda sofrendo com ele...

[William Bruno 1501]

o noCoflict é realmente necessário ?

 

Vc está usando jQuery + motools ? ou prototype ?

Ou só jQuery + jQuery? se esse for o caso, esquece o noConflict.

 

E otimize teu script. A busca no DOM é lenta, e toda essa repetição de código, realmente vai fazer o browser chorar.

[rikaschmitt 54]

o noCoflict é realmente necessário ?

 

você está usando jQuery + motools ? ou prototype ?

Ou só jQuery + jQuery? se esse for o caso, esquece o noConflict.

 

E otimize teu script. A busca no DOM é lenta, e toda essa repetição de código, realmente vai fazer o browser chorar.

 

No meu caso somente jQuery, mas meu amigo disse que o site tbm usa Prototype.

 

Sobre otimizar o script, teria alguma sugestão de como fazer isso?

[William Bruno 1501]

Comece por eliminar as repetições:

 

SemConflito("#lp-1-hover").on('mouseleave', function(){ SemConflito("#lp-1-hover").stop(); clearTimeout(timer1); SemConflito("#lp-1-hover").fadeOut(100); });

vira:

 

var $lp1 = SemConflito("#lp-1-hover")
$lp1.on('mouseleave', function(){ $lp1.stop(); clearTimeout(timer1); $lp1.fadeOut(100); });

Só com isso, já evitei 2 consultas desnecessárias ao DOM. Mas note que é tudo igual! exatamente igual. Então pq você não usa uma classe ?

E troca, tudo isso:

SemConflito("#lp-1-hover").on('mouseleave', function(){ SemConflito("#lp-1-hover").stop(); clearTimeout(timer1); SemConflito("#lp-1-hover").fadeOut(100); });

SemConflito("#lp-2-hover").on('mouseleave', function(){ SemConflito("#lp-2-hover").stop(); clearTimeout(timer2); SemConflito("#lp-2-hover").fadeOut(100); });

SemConflito("#lp-3-hover").on('mouseleave', function(){ SemConflito("#lp-3-hover").stop(); clearTimeout(timer3); SemConflito("#lp-3-hover").fadeOut(100); });

SemConflito("#lp-4-hover").on('mouseleave', function(){ SemConflito("#lp-4-hover").stop(); clearTimeout(timer4); SemConflito("#lp-4-hover").fadeOut(100); });

por apenas:

 

var $lpHover = SemConflito(".lp-hover");
$lpHover.on('mouseleave', function(){ $lpHover.stop(); clearTimeout(timer4); $lpHover.fadeOut(100); });

Não é garantia de que vai resolver o seu problema, mas com certeza deixará teu script muito mais legível.

[rikaschmitt 54]

 

 

Ah sim, entendi.

 

Valeu.

[William Bruno 1501]

O mesmo pode ser feito com a primeira parte do script, usando apenas uma classe, e otimizando muito a performance.

 

Poderíamos trocar 20 buscas no DOM por elementos, por apenas 3.

Se vc mostrar o teu html, consigo te mostrar como.

[rikaschmitt 54]

Realmente, deixa o código mais limpo.

 

 

Mas, consegui resolver o problema!! Setei a altura da div diretamente pelo jquery:

SemConflito('#lp-1-hover').css('height', '292');