Mouseover and mouseout functions DOM element height colliding

Question

This is my jquery

    $('#div1').mouseover(function(){
        $('#div2').css('height','500px');
    }).mouseout(function(){
        $('#div2').css('height','200px');
    });

I put css transition too for "div2" and div2's original height is 200px. My problem is when I tried to mouse over its height not increasing. I tried this without mouseout part's code. It worked perfectly.

Answer 1

style is not a jQuery function. Use css

$('#div1').mouseover(function(){
    $('#div2').css('height','500px');
}).mouseout(function(){
    $('#div2').css('height','200px');
});

Also, css() does not require px units to be specified, so you can just use numbers:

$('#div1').mouseover(function(){
    $('#div2').css('height',500);
}).mouseout(function(){
    $('#div2').css('height',200);
});

Now that you have fixed that the most likely problem is styling. You will need to show the HTML and css you are using.

Example with this code: http://jsfiddle.net/TrueBlueAussie/wyL9ecue/1/