javascript - refactoring the following code to use jQuery

Question

I have some code that adds event listeners that were not written with jQuery.

pic1.addEventListener("webkitTransitionEnd",
    function(){
        pic1.className="down";
        pic1.style.zIndex=picclick;
        },true);
pic1.addEventListener("oTransitionEnd",
    function(){
        pic1.className="down";
        pic1.style.zIndex=picclick;
        },true);
pic1.addEventListener("transitionEnd",
    function(){
        pic1.className="down";
        pic1.style.zIndex=picclick;
        },true);

I want to now add the eventListeners with jQuery, and maintain the same functionality. Ideas on what this should look like?

Here's a sketch of what I'm doing... http://jsdo.it/dbwest/4rqo

Answer 1

You should be able to bind all 3 events in one command like below. I've also included the jQuery equivalents of setting the class and zindex.

$(pic1).bind('transitionend webkitTransitionEnd oTransitionEnd', function(){
    $(this).attr('class','down').css('z-index', picclick);
});

or

$(pic1).on('transitionend webkitTransitionEnd oTransitionEnd', function(){
    $(this).attr('class','down').css('z-index', picclick);
});

Answer 2

event listeners can be replaced in jquery with .on or .bind statements:

var pic1 = $('yourElementOrClass');

pic1.on('transitionend webkitTransitionEnd oTransitionEnd', function(){
    $(this).addClass('down').css('z-index', picclick);
});

Answer 3

I'm not sure you've done enough research for this question, but I'll give you the benefit of the doubt. jQuery has .on, which is the recommended way to bind events. Also it has a shortcut for exactly this situation:

$(pic1).on("webkitTransitionEnd oTransitionEnd transitionEnd",
function(){
    pic1.className="down";
    pic1.style.zIndex=picclick;
});

Having all the events in one like this means you can avoid duplicating code.