Personnalisation du plugin swap() pour animer la couleur d'arrière-plan

Question

Quelqu'un peut-il suggérer comment faire en sorte que les boîtes permutées changent la couleur d'arrière-plan du clic lors de l'utilisation du plugin ci-dessous?

http://www.vertstudios.com/blog/swap-jquery-plugin/ (voir la démo)

Je ne suis pas sûr de savoir comment créer un lien vers plugins dans jsFiddle ne peut donc pas démontrer malheureusement.

Les méthodes animent la position de toutes les boîtes affectant seulement celles où la position a changé. J'essaie d'ajouter une méthode qui anime la couleur de fond de la même manière mais sans succès.

Je ne pense pas que ce soit possible sans personnaliser le plugin mais je peux me tromper.

---

Mise à jour:

Merci Johan. J'aurais dû dire que j'ai vraiment besoin de la couleur d'arrière-plan pour revenir à la valeur par défaut après le swap. J'ai déjà essayé votre solution avec l'amendement ci-dessous. Comme vous pouvez le voir, il se comporte de manière incohérente. Je pense que la façon de le faire correctement est de personnaliser la méthode 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 minified plugin couleur pour anmiate bgcolors:

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

2. Essayez ceci dans l'événement 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

Eh bien, je à peu près c Je pense que cela

Tout ce dont j'ai besoin c'est de ranger. Même si cela fonctionne, je suis sûr que c'est mal codé et ne suit pas les meilleures pratiques. Je serais reconnaissant pour toute suggestion.

Voici comment l'événement click semble maintenant avec deux arguments supplémentaires (test1 et test2) transmis à fakeFloat avec des valeurs de index1 et 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)); 
}); 
}); 

et est la méthode fakeFloat modifiée ici, qui contient maintenant un arrière-plan variable de couleur qui, via une instruction if-else dans chaque instruction, est définie selon que test1 ou test2 est égal à i. L'animation de couleur d'arrière-plan est ajoutée à l'animation de position. J'ai initialisé test1 et test2 avec -1 plutôt que 0 parce que i = 0 qui provoquerait une animation non désirée non désirée sur le chargement.

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; 

};