Preston Preston - 5 months ago 11
jQuery Question

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

Answer

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