JQuery UI динамически переданы IMG с UI/Effects/Transfer

Question

Я использую этот компонент JQuery UI:

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

Мой код заключается в следующем:

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

Но эта линия не влияют на сценарий передачи:

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

Как это исправить?

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 + ")"); 
}); 

Рабочая example

Answer 2

Возможно, нет элемента .ui-effects-transfer, пока эффект не начнется. Вот правильный ответ от @ kbwood.au пользователя из Jquery форума:

$('.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); 
});