jQuery: using delay() and prepend()

Question

In the following code the last line doesn't work in my way:

$('button.goal').click(function () {
 $('div.scorer_away').animate({
  width: 'hide',
  opacy: 'hide'
  }, 'slow')
 .delay(2500)
 .animate({
  width: 'show',
  opacy: 'show'
  }, 'slow');
 $('span.scorer_away').delay(3000).prepend('<img src="chofbauer.png" alt="" />');

How can I make it work, that the prepend()-function adds the new image AFTER 3 sec (because after 2,5 sec the container, where the img prepends is hidden)?

Answer 1

.delay() only works with jQuery fx methods. .prepend() is not one of those.

You can workaround it like

$('span.scorer_away').delay(3000).show(1, function(){
    $(this).prepend('<img src="chofbauer.png" alt="" />');
});

Actually you would have to create your own .queue() for a "clean" solution.

Another way to accomplish that task is to use javascripts native setTimeout().

setTimeout(function(){
   $('span.scorer_away').prepend('<img src="chofbauer.png" alt="" />');
}, 3000);

Answer 2

You could try using setTimeout:

function myfunc() { $('span.scorer_away').prepend('<img...>') };   
setTimeout( myfunc, 3000 );