Question

使用下面的插件时, 是否有人能建议如何让交换框在单击时改变背景颜色?

http://www.verstudios.com/blog/swap-jquery-plugin/" rel="nofollows.com/blog/swap-jquery-plugin/ (见演示)

我不知道如何连接到JSFiddle的插件,

使所有只影响位置已改变的框的位置动画的方法。我试图添加一种方法, 来动画背景颜色相似, 但没有成功。

我不认为这有可能不定制插件,但我可能是错的。

更新 :

感谢约翰,我应该说,在交换后,我实际上需要从背景颜色返回默认状态。我已经用下面的修改尝试过你的解决方案。如你所见,它的行为前后不一致。我认为这样做的正确方式是定制假浮标法。

$("#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

包含最小化的颜色插件, 以移动 bg 颜色 :

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

在单击事件中尝试此选项

$("#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

嗯,我几乎已经打破了这一点,我想。

我现在需要的只是清理它。即使它有效,我肯定它编码错误,没有遵循最佳做法。如果有任何建议,我将不胜感激。

下面是点击事件现在的外观, 加上两个额外的参数( 测试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));
});
});

这里是修正的假Float 方法, 它现在包含一个背景颜色变量, 通过每个语句中的 if-elee 语句, 取决于测试1 或测试2 是否等于 i 。背景颜色动画被添加到位置动画中。我以 - 1 而不是 0 初始化了测试1 和测试2, 因为 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;

};

友情链接