javascript - jQuery - 保持动画状态

Question

我正在用 JavaScript 创建一个绘画应用程序，但我在一个元素上遇到了一点问题。我有一排彩色圆圈，代表可以在应用程序中使用的不同颜色。

当用户将鼠标悬停在它们上方时，borderTopLeftRadius 属性会发生动画。当鼠标移开时，它们会恢复到初始状态:

$('.swatch').mouseover(function() {
    $(this).animate({ borderTopLeftRadius: 40 }, 200)
});

$('.swatch').mouseout(function() {
    $(this).animate({ borderTopLeftRadius: 100 }, 100)
});

我的问题是当用户点击一种颜色时 - 当它被选中时，保持 borderTopLeftRadius 属性发生变化。我试过:

$('.swatch').click(function() {
    $(this).css("border-top-left-radius", "40px");
});

但这会与 mouseout 函数发生冲突。有没有一种方法可以在选择一个样本时保留更改的属性，但仍允许对其他样本进行动画处理？

Answer 1

为事件状态添加一个类:

$('.swatch').on({
    click: function() {
        $('.swatch').not(this).removeClass('active')
                    .animate({ borderTopLeftRadius: 100 }, 200);
        $(this).addClass('active').css({ borderTopLeftRadius: 40 });
    },
    mouseenter: function() {
        if (! $(this).hasClass('active') ) {
            $(this).animate({ borderTopLeftRadius: 40 }, 200)
        }
    },
    mouseleave: function() {
        if (! $(this).hasClass('active') ) {
            $(this).animate({ borderTopLeftRadius: 100 }, 200)
        }
    }
});

FIDDLE