Question

所以我目前正在开发一个使用我用 JQUERY 1.10.2

制作的动画徽标的网站

工作原理：我有一个缩写“AD”，当鼠标悬停在其中一个字母上时，全名从每个字母的右边滑出。

就像AD一样 - ＆gt; A ... D ... - ＆gt; AcusticDream。

上的现场演示

我的代码是：

<script type="text/javascript">
    $(function () {
        $(".logo-firstletter").hover(function () {
            $(".logo-full").animate({width: 'toggle'}, 500);
        });
    });
</script>

请随时查看我的页面源代码以查看。

.logo-firstletter 类是不言自明的， .logo-full 是其他字母。

Bug＃1 所以BUG是，动画效果很好，但是如果你把你的鼠标放在右边（不再是第一个字母上面），它就会无限制地动画......试着亲自看看..

Bug＃2 如果你只是在徽标的字母上反复移动鼠标，似乎jquery会记住你将鼠标放在一边的次数，这样它就会继续动画和动画，直到“计数”结束。

任何帮助都表示赞赏，如果有更好的方法，我也欢迎它！

提前致谢！

Answer 1

也许这个：

$(".logo-firstletter").hover(function () {
     if($(".logo-full").is(":animated")) return;   //Add this
     $(".logo-full").animate({width: 'toggle'}, 500);
});

这样，我们只会在没有当前动画的情况下进行动画处理。

修改：在你的html中添加一个新的包装元素logo-container，如下所示：

<div id="logo-container"> <div class="logo-firstletter">A</div> <div class="logo-full">custic</div> <div class="logo-firstletter">D</div> <div class="logo-full">ream</div> </div>

然后做：

$("#logo-container").hover(function () { $(".logo-full").animate({width: 'show'}, 500); },function () { $(".logo-full").animate({width: 'hide'}, 500); });

希望这会有所帮助。干杯

带有jquery切换宽度动画的两个错误

1 个答案: