How can I get jQuery html() load complete before fadeIn?

Question

i use this script to load content of some div, inside another div:

$(function() {
        $('#menu a').click(function(e) {
            e.preventDefault();
            var h = $(this).attr('href');
            $('#aqui').hmtl($(h).html()).fadeOut('slow').fadeIn('slow');
            //alert(h);
        });
    });

But, as you can see here: http://jsfiddle.net/8rB3S/, the content is load before fadeOut() effect.

i try this tip: https://stackoverflow.com/a/2745494/588842, but with .html(), and this not work.... this only fadeOut and dont fadeIn

Something like that: $('#aqui').fadeOut('slow').hmtl($(h).html, function(){$(this).fadeIn('slow');})

What is the desired effect? May be this >> http://jsfiddle.net/skram/8rB3S/1/ < — Selvakumar Arumugam, Jun 14 '12 at 16:52

score 2 · Accepted Answer · answered Jun 14 '12 at 16:55

2

html() is synchronous, passing it a callback function will not do anything.

fadeOut(), on the other hand, is asynchronous. So, call it first and provide a callback function that modifies the markup, then fades the element back in:

$("#aqui").fadeOut("slow", function() {
    $(this).html($(h).html()).fadeIn("slow");
});

answered Jun 14 '12 at 16:55

Frédéric Hamidi

258,201
41
486
479

perfect! is that the effect i want! – Preston Jun 14 '12 at 16:59

score 1 · Answer 2 · answered Jun 14 '12 at 16:53

I am not sure what is the desired effect, but try below code,

DEMO: http://jsfiddle.net/skram/8rB3S/2/

$(function() {
    $('#menu a').click(function(e) {
        e.preventDefault();
        var h = $(this).attr('href');
        $('#here').fadeOut(100, function () {
            $(this).html($(h).html())           
           .fadeIn('slow');
        });
    });
});

or

DEMO: http://jsfiddle.net/skram/8rB3S/1/ (used #here as that seems to be where you wanted it)

$(function() {
    $('#menu a').click(function(e) {
        e.preventDefault();
        var h = $(this).attr('href');
        $('#aqui')
           .hide()
           .html($(h).html())           
           .fadeIn('slow');        
    });
});

the effect i want is that @Frédéric Hamidi answers! Thanks for your help! — Preston, Jun 14 '12 at 17:00

score 0 · Answer 3 · answered Jun 14 '12 at 16:56

use the callback in fadeout fadein functions :

$(function() {
        $('#menu a').click(function(e) {
            e.preventDefault();
            var h = $(this).attr('href');
            $('#aqui').fadeOut('slow', function(){
                $(this).html($(h).html());
                $(this).fadeIn('slow');
            }):
        });
});

How can I get jQuery html() load complete before fadeIn?

3 Answers3