0

使用以下插件时，任何人都可以建议如何使交换的框在单击时更改背景颜色？

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));
});
4

2 回答 2

0

  1. 包括缩小颜色插件以动画 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));
    });
});
于 2012-05-23T12:49:34.037 回答
0

好吧，我想我已经破解了这个。

我现在需要的只是整理一下。尽管它有效，但我确信它的编码很糟糕并且没有遵循最佳实践。我将不胜感激任何建议。

以下是点击事件现在的样子，其中两个附加参数（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 来设置该变量。背景颜色动画被添加到位置动画中。我已经用 -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;

};
于 2012-05-24T01:00:42.563 回答