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

まあ、私はこれをかなりクラックしたと思います。

今必要なのは、それを整理することだけです。動作しますが、コーディングが適切でなく、ベスト プラクティスに従っていないことは確かです。何か提案があればよろしくお願いします。

以下は、index1 と index2 の値で fakeFloat に渡された 2 つの追加の引数 (test1 と test2) を使用したクリック イベントの外観です。

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

これは、各ステートメント内のif-elseステートメントを介して、test1またはtest2がiに等しいかどうかに応じて設定される背景色変数を含む修正されたfakeFloatメソッドです。位置アニメーションに背景色アニメーションを追加。私は test1 と test2 を 0 ではなく -1 で初期化しました。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 に答える
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 に答える