CODEWITHSUNDEEP
jquerycssfade
user2378436
user2378436

Reputation: 33

Fade out, apply css, fade in - JQUERY

I'm trying to fade out the block on click, thereafter change block position, and Fade In. But it does not work. Here's the code:

$("#info-panel").fadeOut("fast");

$("#info-panel").css({
    top: (new pos),
    left: (new pos)
});

$("#info-panel").fadeIn("fast");

CSS:

#info-panel {
    display: none;
    position: absolute;
    background-color: #333;
    border: 1px solid #999;
    padding: 15px;
    max-width: 300px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0px 0px 10px #000;
    -moz-box-shadow: inset 0px 0px 10px #000;
    box-shadow: inset 0px 0px 10px #000;
    border: 3px solid #666666;
    z-index: 5;
}

Upvotes: 2

Views: 7430

Answers (3)

palaѕн
palaѕн

Reputation: 73896

You need to use the callback function here:

$("#info-panel").fadeOut("fast", function () {
    $(this).animate({
        top: (new pos),
        left: (new pos)
    }, "fast", function () {
        // Animation complete.
        $(this).fadeIn("fast");
    });
});

DEMO HERE

Upvotes: 1

Irvin Dominin
Irvin Dominin

Reputation: 30993

Check how your element is positioned through css see: https://developer.mozilla.org/en-US/docs/Web/CSS/position?redirectlocale=en-US&redirectslug=CSS%2Fposition

Works fine for me in this snippet:

#info-panel {
    position:absolute
}

$("#moveme").click(function () {    
    $("#info-panel").fadeOut("fast");

    $("#info-panel").css({
        top: '80px',
        left: '70px'
    });
    $("#info-panel").fadeIn("fast");
});

Fiddle: http://jsfiddle.net/IrvinDominin/GHXg3/

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

Try something like this:

$("#info-panel").fadeOut("fast", function() {
    $(this).css("color", "red"); //Use your CSS here, I did this as an example.
}).fadeIn("fast");

Demo: http://jsfiddle.net/tymeJV/RPxrS/

Upvotes: 3

Related Questions