CODEWITHSUNDEEP
jquery
user967595
user967595

Reputation: 11

basic question about setting up event listeners in jquery

I come from as3 and I'm a bit lost with jQuery. I have the feeling I haven't grasped the concept of how events work with jQuery, or javascript for that matters. I'm trying to do this:

animation 1 ends --> load image --> animation 2 starts

By now I'm doing this through the complete:function(){} parameter in .animate(). It works, but is not very flexible.

How is it possible to set up a scenario like this?:

*

addEventListener(when animation 1 ends, do whatever)

addEventListener(when image loading ends, do whatever)

addEventListener(when animation 2 ends, do whatever)

*

I' tried using .bind() and .live(), something like $(window-document-div-etc).bind('load','animation stored in a variable', etc) with no results. Any suggestions on how to do it?

Thanks in advance

First of all, thanks everybody for your help.

Sorry for using this "answer your question" feature, I haven't beenn able to use the "add comment" link, and, after all, I find a little silly pasting the same answer to everybody. If there is some kind any kind of moderator around, please move this to wherever it should be moved.

Please excuse my lack of a proper technical language. This "callback functions" approach is the one I've used at first, and it works fine, but the resulting code is not very reusable.

I would like to know how is it possible to write something more respectful with encapsulation, something like this:

Image A is loaded, event is dispatched "IMAGE LOADED"

Totally unrelated Object B has a listener for the "IMAGE LOADED" event, so receives  the event and processes it through its method bDoesThis().


Totally unrelated Object C has a listener for the "IMAGE LOADED" event, so receives the event and processes it through its method cDoesThat().

Thanks again!

Upvotes: 0

Views: 154

Answers (3)

daryl
daryl

Reputation: 15197

I think you're referring to Callback Functions.

$('div').animate({
    left: 50
}, 500, function() {
    // animation completed.
    $(this).hide();
});

$('img').bind('load', function() {
    // Callback (image has loaded)
    $(this).fadeIn(200);       
});

Upvotes: 2

Billy Moon
Billy Moon

Reputation: 58531

You would use callback functions, and an event listener for the image like this:

// select what you want to animate, and do some animation
// set a callback function to execute upon completion
$('div').animate({width:100},2000,function(){
    // in the callback - create a new IMG element
    $('div').html('<img id="newImage" src="http://farm7.static.flickr.com/6085/6027474363_42050547b2_b.jpg" />')
    // set an event listener for your IMG element
    $('#newImage').load(function(){
        // do second animation
        $('div').animate({width:800},2000)
    })
})

You can see a demo of this code here: http://jsfiddle.net/fePzu/

Upvotes: 0

arviman
arviman

Reputation: 5255

You bind events to objects that you obtain using a $(selector) format, for instance $(document) or $('#yourElementid') and add event handlersr using bind or live. Live has the advantage that any newly created elements that match the selector automatically get bound using your event handler. For example,

 $('.clickme').bind('click', function()
    {//event handler.
      $(".block:first").animate({"left": "+=50px"}, "slow" , "swing", function(){
        //animation 1 ends.do whatever in callback
      });
    };

You can alternatively just use $('.clickme').click(function(){}); as a shortcut instead of the cumbersome $('.clickme').bind('click',function(){}) syntax.

Upvotes: 1

Related Questions