Is this really jQuery?

And again this code:

audioElement.addEventListener('ended', function() {
    $('span#pause').fadeOut('slow');
    $('span#play').delay(1500).fadeIn('slow')开发者_如何学运维;
});

As far as I know "addEventListener" should be "bind" but somehow when I simply change it the whole script (there's more than these lines) doesn't work anymore...

addEventListener is a method of the DOM element.

fadeOut, fadeIn and delay are jQuery methods.

If you want to use the bind method, you need a jQuery object, so it would be like

$(audioElement).bind('ended', function() {
    $('span#pause').fadeOut('slow');
    $('span#play').delay(1500).fadeIn('slow');
});

addEventListener works on DOM elements, while bind works on jquery objects. The event handler contains JQuery code, but addEventListener is JavaScript. You could change it to:

$(audioElement).bind('ended', function() {
    $('span#pause').fadeOut('slow');
    $('span#play').delay(1500).fadeIn('slow');
});

This makes it 'full JQuery' (which is still JavaScript) :)

The addEventListener is a DOM method. If you want to use the jQuery method instead, you have to wrap the DOM element in a jQuery object:

$(audioElement).bind('ended', function() {
  $('span#pause').fadeOut('slow');
  $('span#play').delay(1500).fadeIn('slow');
});

You can listen to any event, including custom ones--here the listener is attached via JavaScript; it's only the code inside the function that's jQuery.