CODEWITHSUNDEEP
jquerymcustomscrollbar
Preston
Preston

Reputation: 2185

call script after element is fully visible

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);
});

Upvotes: 0

Views: 1108

Answers (1)

Anthony Grist
Anthony Grist

Reputation: 38345

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);
    });
});

Upvotes: 1

Related Questions