1

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

    /* 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”（单击上方菜单进入页面）时，我想制作一个小动画。

正如您所看到的，它的动画效果“很好”，但根本没有，有时如果您转到“PRODUCTES”并返回“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>
4

2 回答 2

1

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

我可以通过单击SOBRE NOSALTRES来重现该问题，然后将鼠标快速移入和移出浏览器窗口。

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

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

    $("body").hover(function() {
        $("#bg_hover").stop().animate({ opacity: 0.9 }, 500);
    }, function( ) {
        $("#bg_hover").stop().animate({ opacity: 0 }, 500);
    });
});
于 2012-11-27T10:04:47.343 回答
0

不要把它分成两行：\

$("#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);
于 2012-11-27T09:50:56.973 回答