Question

该网站使用“黑色不透明度”过滤器：

    /* Body black hover */
    $(document).ready(function() {
        $("#bg_hover").stop();
        $("#bg_hover").animate({ opacity: 0.5 }, 1000);
        $("body").hover(function() {
            $("#bg_hover").stop();
            $("#bg_hover").animate({ opacity: 0.5 }, 1000);
        }, function( ) {
            $("#bg_hover").stop();
            $("#bg_hover").animate({ opacity: 0 }, 1000);
        });
    });

我遇到的问题是，当用户进入“SOBRE NOSALTRES”时，我想制作一个小动画（点击上方菜单进入页面）。

正如你所看到的那样，动画“很好”但根本没有，有时如果你去“产品”并回到“SOBRE NOSALTRES”，动画就会被卡在98％宽度。这有点奇怪，为什么会发生？

这是错误的屏幕截图： http://webkunst.comeze.com/test/3.png

这是我用来在NOSALTRES页面上制作动画的脚本：

    <script>
        $(document).ready(function() {
            $("#bg_hover").stop();
            $("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);
            $('li#nosaltres').addClass('active')
        });
        $("body").hover(function() {
            $("#bg_hover").stop();
            $("#bg_hover").animate({ opacity: 0.9 }, 500);
        }, function( ) {
            $("#bg_hover").stop();
            $("#bg_hover").animate({ opacity: 0 }, 500);
        });
    </script>

Answer 1

当您在 PRODUCTES 页面加载<{1>}时悬停时出现问题，因为您在<body>的第一行调用$("#bg_hover").stop(); {1}}停止所有动画，包括将宽度减小到$("body").hover(function() {});的动画。

我可以通过点击 SOBRE NOSALTRES ，然后快速将鼠标移动到浏览器窗口内外来重现问题。

在初始调整为80%之前，我不会将悬停效果添加到<body>，例如通过在动画完成后添加匿名函数来调用。

80%

Answer 2

不要将它分成两行：\

$("#bg_hover").stop();
$("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);

相反，请使用：

$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);

奇怪的jquery动画行为

2 个答案: