定制swap（）插件为背景色设置动画效果

Question

任何人都可以建议如何使用下面的插件时点击交换框改变背景颜色？

http://www.vertstudios.com/blog/swap-jquery-plugin/（见演示）

我不知道如何的jsfiddle链接到插件，所以不能证明不幸。

该方法为所有盒子的位置设置动画，只影响位置发生变化的盒子的位置。我试图添加一个方法来动画背景颜色，但没有成功。

我不认为这是可能的，如果没有自定义插件，但我可能是错的。

---

更新：

感谢约翰。我应该说我实际上需要背景颜色在交换后动画回到默认值。我已经在下面的修改中尝试了你的解决方案。正如你所看到的，它的行为不一致。我认为正确的做法是自定义fakeFloat方法。

$("#swapTrigger").click(function() 
{ 
var index1 = $('input:radio[name=index1]:checked').val(); 
var index2 = $('input:radio[name=index2]:checked').val(); 
boxes = $(boxes).swap(index1,index2); 

var $box1 = $('.box').eq(index1); 
var $box2 = $('.box').eq(index2); 

var randomHex = '#fc0'; 

$box1.animate({ backgroundColor: "#fc0" }, 300); 
$box2.animate({ backgroundColor: "#fc0" }, 300); 


$(boxes).fakeFloat({margin: 10, offset: 20, speed: 300}).each(function() 


{ 
    $box1.animate({ backgroundColor: "#fff" }, 300); 
    $box2.animate({ backgroundColor: "#fff" }, 300); 
    $(this).html($(this).getIndexOf(boxes)); 
}); 

Answer 1

1. 包括精缩色插件，以anmiate bgcolors：

   http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js

2. 试试这个在onclick事件

   $("#swapTrigger").click(function() 
   { 
       var index1 = $('input:radio[name=index1]:checked').val(); 
       var index2 = $('input:radio[name=index2]:checked').val(); 
       boxes = $(boxes).swap(index1,index2); 
   
       var $box1 = $('.box').eq(index1); 
       var $box2 = $('.box').eq(index2); 
   
       var randomHex = '#'+Math.floor(Math.random()*16777215).toString(16); 
   
       $box1.animate({ backgroundColor: randomHex }, 200); 
   
       $(boxes).fakeFloat({margin: 10, offset: 20, speed: 300}).each(function() 
       { 
        $(this).html($(this).getIndexOf(boxes)); 
       }); 
   }); 
   

Answer 2

好，我已经很多了我认为，这已经拖累了这一点。

我现在需要的是整理它。即使它起作用，但我确定它的编码严重不符合最佳做法。我会很感激任何建议。

这里是click事件，现在的样子与传递给fakeFloat与索引1和索引2的值的两个额外的参数（测试1和测试2）：

$("#swapTrigger").click(function() 
{ 
var index1 = $('input:radio[name=index1]:checked').val(); 
var index2 = $('input:radio[name=index2]:checked').val(); 
boxes = $(boxes).swap(index1,index2); 

var $box1 = $('.box').eq(index1); 
var $box2 = $('.box').eq(index2); 

var randomHex = '#'+Math.floor(Math.random()*16777215).toString(16); 

$box1.animate({ backgroundColor: randomHex }, 300); 
$box2.animate({ backgroundColor: randomHex }, 300); 

$(boxes).fakeFloat({margin: 10, offset: 20, speed: 300, test1: index2, test2: index1}).each(function() 
{ 
    $(this).html($(this).getIndexOf(boxes)); 
}); 
}); 

这里是修订后的fakeFloat方法，它现在包含一个背景颜色变量，通过每个语句中的if-else语句，根据test1或test2是否等于i来设置。背景颜色动画被添加到位置动画。我使用-1而不是0初始化了test1和test2，因为i = 0这会在加载时导致不需要的动画。

jQuery.fn.fakeFloat = function(options, callback) 
{ 

var defaults = { 
direction: "left", 
margin: 0, 
offset: 0, 
speed: 0, 
test1: -1, 
test2: -1 
}, 
settings = jQuery.extend({}, defaults, options); 

//Initialize counter 
var i=0; 

//Default background color 
var bg = "#fff"; 

//Initialize element width 
var elemWidth = 0; 

jQuery(this).each(function() 
{ 
    if (settings.test1 == i || settings.test2 == i) { 
     bg = "#fc0"; 
    } 
    else 
    { 
     bg = "#fff"; 
    } 

    elemWidth = jQuery(this).width(); 
    if(settings.direction == "left") 
    { 
     jQuery(this).animate({"backgroundColor": bg}, 300); 
     jQuery(this).animate({"left": ((settings.margin) + elemWidth)*i + (settings.offset) + 'px'}, settings.speed); 
     jQuery(this).animate({"backgroundColor": "#fff"}, 300);   } 
    else 
    { 
      jQuery(this).animate({"right": ((settings.margin) + elemWidth)*i + (settings.offset) + 'px'}, settings.speed); 
    } 
    i++; 
}); 

if(typeof callback == 'function') 
{ 
    setTimeout(function(){callback.call(this);}, settings.speed); 
} 

return this; 

};