我正在尝试制作一个相当简单的动画; 鼠标悬停时,该按钮将变大。 不悬停时,它将恢复为原始大小。 但是,每当我尝试此示例代码时,它会将按钮扭曲为奇数大小

$('.btn').hover(function() {
    $(this).removeClass('btn-primary').addClass('btn-warning');
    $(this).stop().animate({
        'height': $(this).height() * 2,
        'width': $(this).width() * 1.3
    }, 300);
}, function() {
    $(this).removeClass('btn-warning').addClass('btn-primary');
    $(this).stop().animate({
        height: $(this).height(),
        width: $(this).width()
    }, 300);
});

http://jsfiddle.net/RBLqY/1/

这个问题怎么解决?

===============>>#1 票数:1 已采纳

我不完全确定为什么您的代码会失败,似乎在返回原始大小时出现某种计算错误。 经过一番摆弄之后,我找到了解决方案。 通过设置填充动画而不是高度和宽度,您不必担心调整链接大小时的高宽比。

$('.btn').hover(function() {
    $(this).removeClass('btn-primary').addClass('btn-warning');
    $(this).stop().animate({
        padding: '12px'
    }, 300);
}, function() {
    $(this).removeClass('btn-warning').addClass('btn-primary');
    $(this).stop().animate({
        padding: '7px'
    }, 300);
});

的jsfiddle

希望这可以帮助。

  ask by corvid translate from so

未解决问题?本站智能推荐:

2回复

为什么在使用JQuery时,当我将鼠标悬停时没有平滑的动画?

我的script.js文件中包含以下内容: 颜色发生了变化(根据我在样式表中给出的说明),但是没有动画(或过渡)。 它只是二进制地传递到另一种颜色,没有动画可以在短时间内通过中间的所有颜色。 为什么是这样? 编辑:刚刚尝试了fadeIn()和fadeOut(),并且它们工作
2回复

鼠标悬停时如何改善此动画效果

我正在使用jquery移动div。 但是还有一些需要改进的地方 当鼠标靠近左边框时,div不断向右移动然后向左移动。 这是正常现象,因为对鼠标敏感的区域正在移动。 您对改善此动画有何建议? 这是我的代码,这是小提琴 我也尝试过mouseenter但结果相同:
1回复

鼠标悬停时隐藏并设置动画

我希望当鼠标悬停并启用动画实例化以及当mouserout div返回时隐藏我的div。 所以我做了这样的事情。 到目前为止,我只能隐藏-其他所有不起作用= / 的CSS
1回复

动画在悬停时停止,从鼠标悬停开始,但是无法再次悬停以重复停止动画

在转盘上工作时,我可以使用动画和div包装,但是我想添加以下功能:悬停时停止转盘,并在鼠标移开时重新启动动画,但是它只能工作一次。 悬停会停止动画,鼠标悬停会再次开始,但是如果我再次悬停它不会停止。
2回复

鼠标悬停时将jquery动画放置在图像元素上

我正在尝试整理图像以将鼠标悬停在上面。 我在测试以下内容,即单击时将整个div移到左侧。 但是,我只想将鼠标悬停在每个图像上,它们会摆动。 任何帮助和建议都很好! CSS JS
1回复

鼠标悬停时的jQuery透明图像描述幻灯片动画[关闭]

好的,我们开始吧,我为您准备了这个小提琴: 演示 它没有按预期工作,因此我将描述我需要什么以及存在什么问题。 目标是将鼠标悬停在框上时的滑动描述。 这就是我想要的,并且强调了所有无效的内容 : 每个盒子都有图像,标题和描述。 除说明以外的所有内容均可见。
4回复

鼠标悬停动画怪异行为

我正在用jquery创建一个简单的动画。 动画包含一个div,当鼠标悬停该div时向左滑动。 这是我的html: 这是js: 这是CSS: 动画正常运行,但是我注意到,如果在动画运行时将光标移到.image div的左边框上,它会暂停片刻,然后继续播放。
1回复

如何使用JQuery检测鼠标悬停并在动态项目上添加动画

我有一系列的div可以动态加载。 页面加载时会设置ID,并且它们都具有相同的“ pp-post”类。 当用户将鼠标悬停在带有class =“ pp-post”的项目上时,该项目中的'p'项目变为可见。 我想为每个“ p”标记添加可见的动画。 我对JQuery的经验很少,所以我想知
2回复

jQuery鼠标悬停间隔

我正在尝试在此插件中创建相同的mouseover滚动效果:(尝试将鼠标悬停在箭头上) http://coffeescripter.com/code/ad-gallery/ 我有这个脚本: 但是,此脚本无法实现相同的效果。 它按照我的意愿向左移动div动画,但在每个间隔后暂停
2回复

带有动画CSS的图像+提交按钮悬停

我有一个带有Animate.css的动画 此动画在页面加载时发生-没问题 但是当用户将鼠标悬停在提交按钮上时,我想重新加载相同的动画。 我最初的想法是在CLICK上重新加载动画(如果可能的话将是完美的)-但我认为该动画将永远不会发生,因为单击“提交”按钮后,页面将变为另一个。