JQuery "on appear" event

May be you want .ready() function :

$("#box-descr").ready(function(){
   console.log("I showed up");   
});

or if you are fading it in :

$("#box-descr").fadeIn(1000, function(){
   console.log("I showed up");   
});

Update: As @Jeff Tian's comment-

You need to delegate event to the either closest static parent or to the document like this:

$(document).on("ready", "#box-descr", function(){
   console.log("I showed up");   
});

Events are nice but because there is no native event for appearance, events require knowing when an item is added so that the event can be manually triggered. You can use polling to test for the appearance of something and do an action when it appears. This works great for content that is added outside your control, such as from user input, ajax, or other programs.

setInterval(function() {
    $('.my-element-class:not(.appeared)')
        .addClass('appeared')
        .each(function() {
            console.log("here I am!")
        });
}, 250);

This will check for the appearance of an element by class name (or any other selector criteria you supply) 4 times each second and run the code when a new item appears. Once an item is seen the .appeared class is added to prevent that instance from being detected again. If you only want to test for one appearance you can simplify thusly and close down the polling after detection.

var testAppearTmr = setInterval(function() {
    if ($('.my-element-class').length) {
        clearInterval(testAppearTmr);
        console.log("here I am!")
    }
}, 250);

The jQuery appear plugin is built around these techniques and has a lot more options, like tests for if the item is in the view area, but if all you want to do is test for a few items being added to the dom the above code is much thriftier than a plugin.

Tags:

Jquery