定製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; 

};