jquery UI dynamically transfered img with UI/Effects/Transfer
-
17-06-2021 - |
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?
Solution
$(".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
OTHER TIPS
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);
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow