jquery UI 用 UI/Effects/Transfer 动态传输 img答案

【问题标题】：jquery UI dynamically transfered img with UI/Effects/Transferjquery UI 用 UI/Effects/Transfer 动态传输 img
【发布时间】：2012-06-27 16:47:33
【问题描述】：

我正在使用这个 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+")");

我该如何解决这个问题？

【问题讨论】：

你能贴出上面有ui-effects-transfer类的html元素吗？

标签： jquery jquery-ui transfer jquery-effects

【解决方案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

【讨论】：

【解决方案2】：

在效果开始之前可能没有.ui-effects-transfer 元素。这是来自 jquery 论坛的@kbwood.au 用户的正确答案：

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

【讨论】：