Настройка swap() плагина для анимации цвета фона

Question

Можно ли предложить, чтобы измененные цвета меняли цвет фона при нажатии этого плагина?

http://www.vertstudios.com/blog/swap-jquery-plugin/ (см демо)

Я не знаю, как связать с плагинами в JSFiddle поэтому не может продемонстрировать, к сожалению.

Методы анимируют положение всех ящиков, затрагивающих только те, где положение изменилось. Я пытаюсь добавить метод, который анимирует фоновый цвет аналогично, но без успеха.

Я не думаю, что это возможно без настройки плагина, но я могу ошибаться.

---

Update:

Благодаря Йохан. Я должен был сказать, что мне действительно нужен цвет фона для анимации назад по умолчанию после свопа. Я уже пробовал ваше решение с приведенной ниже поправкой. Как вы можете видеть, это ведет себя непоследовательно. Я думаю, что способ сделать это правильно - настроить метод 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. Include уменьшенная цвет плагин для того, чтобы 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

Ну, я в значительной степени c Я считаю, что это лопнуло.

Все, что мне теперь нужно, это привести его в порядок. Несмотря на то, что он работает, я уверен, что он плохо закодирован и не соответствует лучшей практике. Я был бы признателен за любые предложения.

Вот как событие щелчка выглядит теперь с двумя дополнительными аргументами (test1 и test2), переданных fakeFloat со значениями INDEX1 и index2:

$("#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. Фоновая цветная анимация добавляется в анимацию положения. Я инициализировал test1 и test2 с -1, а не 0, потому что 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; 

};