Home/ Questions/Q 8908829
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T03:16:58+00:00

The website uses a black opacity filter made with this: /* Body black hover

  • 0

The website uses a “black opacity” filter made with this:

    /* 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);
        });
    });

The problem I have is that I wanted to make a little animation when the user enters to “SOBRE NOSALTRES” (click upper menu to enter the page).

As you can see it animates “well” but not at all, sometimes if you go to “PRODUCTES” and back to “SOBRE NOSALTRES” the animation get’s stuck at 98% width. It’s kind of strange, why does it happens?

here it’s a screenshot of the error:
http://webkunst.comeze.com/test/3.png

and this is the script i’m using to make the animation on NOSALTRES page:

    <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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem occurs when you hover in the <body> when the PRODUCTES page is loading since you call $("#bg_hover").stop(); in the first line of $("body").hover(function() {}); which stops all animation, including the animation that is reducing the width to 80%.

    I can reproduce the problem by clicking on SOBRE NOSALTRES, then moving the mouse to the in and out of the browser window quickly.

    I would not add the hover effect to the <body> until the initial resizing to 80% is finished, for example by adding an anonymous function to call once the animation is complete.

    $("#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);
    });
});
    • 0