Effect with jQuery locking without reason

Question

I am 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 puts the mouse over the div id "lp-1", another div will arise with the effect "slidedown". The problem is that it is catching the effect. The div appears and hangs in the middle, it does not appear completely. There are cases (like in Mozilla) that the div hardly appears.

I don’t know what it is. I really need help..

Remark: That "Semconflict" is a variable I made:

var SemConflito = jQuery.noConflict();

Functional example: http://jsfiddle.net/vn1b4sck/

Explaining better how this effect works: on the site there is a part where appear 4 Divs, side by side. Each div with its own content. When the user hovers over one of them, a new div descends on top of the current one, with new information. When the mouse leaves, the div disappears. The problem is when the user passes the mouse in the div and goes to the other, and it seems to me that in this movement transition, the height of the Uga effect, causing the div to just "go down" until the time it was the last time.

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

Answer 1

From what I understand you want to give a delay in the opening of .slideDown, you can achieve this effect by using the .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 on Jsfiddle.

Answer 2

I tested your code here and it worked, I just made a modification:

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

I made the include of Jquery UI, it is also necessary because of easing. http://jqueryui.com/

Look at the test I took: http://jsfiddle.net/21045e0y/2/

Answer 3

I tidied up!!

It was silly, but I decided to set the div height by jQuery himself and take the one from css. It worked!! It’s not giving height conflict.. : D

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

Answer 4

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

http://jsbin.com/zeqeyo/1/edit