Question

I have following code that is executed when doing a mouseenter on a div :

$('.expandable').mouseenter(function () {
    $(this).find('.links').css('visibility', 'hidden');

    $(this).find('.links').show('fast', function () {
        $(this).find('.links').css('visibility', 'visible');
        alert("The paragraph is now visible");
    });
}

Normally $(this).find('.links').eq(0).css('background-color', 'visible'); should be executed after the animation is done but i am looking in the developer tools (chrome) when doing mouseenter and mouseout, but the css does not change… But I am getting the alert when the animation is done.

Somebody can help me with this?

EDIT, SOLUTION:

$('.expandable').mouseenter(function () {
    $(this).find('.links').css('visibility', 'hidden');

    $(this).find('.links').show('fast', function () {
        $(this).css('visibility', 'visible');
        alert("The paragraph is now visible");
    });
}

Answer 1

I don’t see $(this).find('.links').eq(0).css('background-color', 'visible'); in your code. Anways you can use this inside the callback which will point to the element being animated. Try this.

$('.expandable').mouseenter(function () {
    $(".divname").css('visibility', 'hidden');

    $(".divname").fadeIn('fast', function () {
        $(this).css('visibility', 'visible');
        alert("The paragraph is now visible");
    });
}