我正在尝试创建一个聊天框,当按下它时,它会移除阴影并在右下角进行动画处理(这样看起来就像被按下一样)
代码如下:
$('.chatbox').mouseenter(function() {
var top1 = parseInt($(this).css('top'));
var left1 = parseInt($(this).css('left'));
top1 += 10;
left1 += 10;
$(this).css('box-shadow', '1px 1px 5px #000000');
$(this).stop(true, true).animate({
top: top1,
left: left1
});
}).mouseleave(function() {
var top1 = parseInt($(this).css('top'));
var left1 = parseInt($(this).css('left'));
top1 -= 10;
left1 -= 10;
$(this).css('box-shadow', '10px 10px 5px #888888');
$(this).stop(true, true).animate({
top: top1,
left: left1
});
});
我遇到的问题是,当我在元素上快速移动鼠标时,该位置将开始越来越远离它应该在的位置。
我尝试将停止功能添加到动画中,但这只会加速动画并且值仍然关闭。有人能指出我正确的方向吗?这个问题可能有一个非常简单的解决方案,我只是无法理解它。如有必要,我会发布一个 JSfiddle。
最佳答案
经过进一步反射(reflection),我发现了我的错误:我没有添加到顶部和左侧,而是设置了它们,这是对 html 工作原理的轻微误解 :)
$('.chatbox').mouseenter(function() {
$(this).css('box-shadow', '1px 1px 5px #000000');
$(this).stop(true, true).animate({
top: 10,
left: 10
});
}).mouseleave(function() {
$(this).css('box-shadow', '10px 10px 5px #888888');
$(this).stop(true, true).animate({
top: 0,
left: 0
});
});
关于javascript - 在 Jquery 中为 mouseenter 上的阴影设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20794672/