Effect with jQuery crashing without reasons

Question

Effect with jQuery crashing without reasons

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (1 votes)

3

I'm using the following jQuery command:

   var timer1;
        SemConflito("#lp-1").on('mouseover', function(){
            clearTimeout(timer1);
            timer1 = setTimeout(function(){
                SemConflito("#lp-1-hover").stop().slideDown({duration: 400, easing: 'easeInCubic'}); }, 300);
    });

The effect is simple, when the user places the mouse over the id id "lp-1", another div will appear with the "slidedown" effect. The problem is that it is catching the effect. The div comes up and hangs in the middle, does not quite appear. There are cases (like in Mozilla) that hardly the div appears.

I do not know what it is. I really need help.

Note: That "Unconflict" is a variable that I did:

var SemConflito = jQuery.noConflict();

Functional example: link

Explaining better how this effect works: on the site there is a part where 4 divs appear side by side. Each div with its own content. When the user hover over one of them, a new div descends upon the current one with new information. When the mouse exits, the div disappears. The problem is when the user passes the mouse on the div and goes to the other, and it seems to me that in this transition of movement, the height of the buga effect, causing the div only to "descend" to the height that was last time.

Maybe there's some more practical way or even a simple plugin for this.

javascript html jquery css

asked by anonymous 22.08.2014 / 14:47

4 answers

3

So I understand you want to delay the opening of .slideDown , you can achieve this effect using .delay as in the example below:

jquery:

var SemConflito = jQuery.noConflict();
SemConflito("#lp-1").on('mouseover', function () {
    SemConflito("#lp-1-hover").delay(500).slideDown({
        duration: 400,
        easing: 'easeInCubic',
    });
});

See working in JSFiddle .

22.08.2014 / 15:50

1

I tested your code here and it worked, I just made one change:

SemConflito("#lp-1-hover").stop().slideDown(400,'easeInCubic');

I made the include of Jquery UI, it's also needed because of easing. link

See the test I did: link

22.08.2014 / 15:24

1

Consider solving only with css transition . An example in fiddle:

link

24.08.2014 / 14:35

Best SQL DBMS for large databases (RAIS RAM mem) Fill a DataTable from a list of a complex type

score 1 · Accepted Answer

I got it !!

It was silly, but I decided to set the height of the div by jQuery itself and remove the CSS. It worked!! It is not giving rise to conflict ..: D

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