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

包含缩小的颜色插件以模仿bgcolors：

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

在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事件现在看起来如何使用另外两个参数（test1和test2）传递给具有index1和index2值的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 = '#'+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;

};

自定义swap（）插件以动画背景颜色

2 个答案: