pixasticライブラリを使用して、画像(テーブル)にぼかし効果を追加しています。テーブル上のアイテムでも同じ効果が有効になっています(同じクラスがあり、クラスの要素でpixasticblur効果が呼び出されています)。
ただし、マウスが要素間を移動すると、効果が1ミリ秒消えてから表示されます。言うまでもなく、これはひどいように見えます。
上の表では、ぼかしのピクセル効果がテーブルとテーブルの3つのブラウスに適用されています。マウスが1つの要素(テーブルなど)から別の要素に移動すると、ぼかし効果が(一瞬だけ)壊れます。
これが私のコードです:
// class .cItemsOnTable is elements which need to be blurred
$(document.body).on("mouseover", ".cItemsOnTable", function (event) {
/* as the blur effect is suppose to simulate eye focus,
I use pixasticRevert func. to revert the blur effect
on other elements when mouse hovers over elements with
class cItemsOnTable */
pixasticRevert();
var modelWearArray = $(".cModelWear");
/* modelWearArray is the other elements which receive blur
effect if mouse is not hovering over class cItemsOnTable */
$(modelWearArray).each(function () {
$(this).addClass("cBlur");
pixasticBlur();
}
}).on("mouseleave", ".cItemsOnTable", function (event) {
pixasticRevert();
var itemsOnTableArray = $(".cItemsOnTable");
$(itemsOnTableArray).each(function () {
$(this).addClass("cBlur");
});
pixasticBlur();
});