Question

I’m using this script below for loading a hidden div, inside another:

$(document).ready(function(){
    $(function() {
        $('#menu a').click(function(e) {
            e.preventDefault();
            $('#menu a').removeClass("selected");
            $(this).addClass("selected");
            var h = $(this).attr('href');
            $("#conteudo").fadeOut("slow", function() {
                $(this).html($(h).html()).fadeIn("slow");
            });
        });
 });

But in some pages, I use some mCustomScrollbar, which only works if the div is not hidden. So I need to call the script after the div is fully visible. How I can do that with the code above?

This is the scrollBar script call:

$("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);

In the page of script, it has this example code, but my script load is valid for the entire menu … and this example it is setting what page he wants to carry. Do I make myself clear?

$("#mcs_container .content").load("new.html", function(){
    $("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
});

Answer 1

You can pass a callback function to the .fadeIn() function that will be executed once the animation has ended (making the <div> visible). It should look something like this:

$("#conteudo").fadeOut("slow", function() {
    $(this).html($(h).html()).fadeIn("slow", function() {
        $("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
    });
});