Glowing menu bullets points with jquery

This simple technique places a bullet point image at the front of list menu items with jquery and then fades the bullet point in and out as the mouse moves over. It creates a subtle glowing effect. An example can be seen here. julia ostoepath In order to make this work, you must include jquery e.g.

<script type="text/javascript" src="somepath/jquery.js" /> 

The first block of code inserts a bullet point, and fades them all to 0% opacity Right click and download this one if you have a brown website :)

$(document).ready(function() {

     $("#block-menu-primary-links li").prepend("<img class='imbul' src='/sites/all/themes/osteopath/images/a3.png' />");

        $("#block-menu-primary-links li").mousedown(function() {
            $("#content").fadeOut("fast");
            $("#block-menu-primary-links li .imbul").stop().animate( {
                opacity : 0
            }, 200);
        });

    });

Note my menu is identified with #block-menu-primary-links. Next, to fade the bullets in and out. Place this code after (outside) the document ready code. #block-menu-primary-links

$(function() {
    // OPACITY OF BUTTON SET TO 0%
    $("#block-menu-primary-links li .imbul").css("opacity", "0");

    // ON MOUSE OVER
    $("#block-menu-primary-links li").hover(function() {

        // SET OPACITY TO 100%
            $('.imbul',this).stop().animate( {
                opacity : 1.0
            }, 500);
        },

        // ON MOUSE OUT
            function() {

                // SET OPACITY BACK TO 50%
            $('.imbul',this).stop().animate( {
                    opacity : 0
                }, 3000);
            });
});