jquery UI dynamically transfered img with UI/Effects/Transfer

Question

I'm using this JQuery UI component:

http://docs.jquery.com/UI/Effects/Transfer

My code is this:

$(".button").click(function () {
  var source = $(this).attr("src");
  $(".ui-effects-transfer").css("background-image", "url("+source+")");  
  $(this).effect("transfer", { to: $(".target") }, 1000);
});

But this line doesn't affect transfer script:

$(".ui-effects-transfer").css("background-image", "url("+source+")"); 

How can I fix this?

Answer 1

$(".button").click(function () {
  var source = $(this).attr("src");
  $(this).effect("transfer", { to: $(".target") }, 1000); // <- comes first
  $(".ui-effects-transfer:last").css("background-image", "url(" + source + ")");
});

Working example

Answer 2

There is probably no .ui-effects-transfer element until the effect starts. Here's correct answer from @kbwood.au user from jquery forum:

$('.button').click(function() {
    $('#transferEffect').remove(); // Remove any existing one
    $('<style id="transferEffect" type="text/css">' + // Add new one
        '.ui-effects-transfer { background-image: url(' + $(this).attr('src') + '); }' +
        '</style>').appendTo('head');
    $(this).effect('transfer', {to: $('.target')}, 1000);
});