23 thoughts on “jQuery Tutorial : switchClass Animated Horizontal Menu mouseenter mouseleave”

  1. <!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8">
    <head>
    <title>Abdibogoreh</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script&gt;
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script&gt;
    <script type="text/javascript" src="http://ui.jquery.com/latest/ui/effects.core.js"></script&gt;

    <script type="text/javascript">
    $(document).ready(function() {
    //Mouse Enter Animation Mechanism
    $("#menu a").mouseenter(function () {
    $(this).switchClass("style1", "style2", 700);
    });
    //Mouse leave Animation Mechanism
    $("#menu a").mouseleave(function () {
    $(this).switchClass("style2", "style1", 700);
    });
    });
    </script>

    <style type="text/css">
    body{
    background:#161616;
    margin:0px;
    }

    #topBanner{
    background-color: #333;
    font-size:28px;
    color: #999;
    padding:24px;
    text-align: center;
    }

    #menu {
    background: #000;
    border: #1E1E1E 1px solid;
    padding: 10px 0px 10px 0px;

    }

    .style1 {
    background-color:#000;
    font-size: 16px;
    color:#666;
    padding:10px 30px 10px 30px;
    border:#1E1E1E 1px solid;
    text-decoration:none;
    }

    .style2 {
    background-color:#055f7C;
    font-size:16px;
    color:#FFF;
    padding:10px 30px 10px 30px;
    border:#1E1E1E 1px solid;
    text-decoration:none;
    }

    /* End styles for the menu elements */
    </style>
    </head>
    <body>

    <div id="topBanner">
    jQuery SwitchClass Css Animated Horizontal Menu Horizontal

    <div id="menu">
    <a class="style1" href="#">Home</a>
    <a class="style1" href="#">Services</a>
    <a class="style1" href="#">Portfolio</a>
    <a class="style1" href="#">Clients</a>
    <a class="style1" href="#">News</a>
    <a class="style1" href="#">Contact Us</a>
    </div>
    </div>

    </body>
    </html>

  2. I had problems with the animation (simply I couldn't get anything to respond to the interactions), and I corrected that using all the external jQuery files that Adam used (instead of just using one particular jQuery that I had in my computer), maybe some people could have trouble with that.

  3. @parv81 hi thx for the advice. I have got both working at the same time now, The problem i now have is changing the styling can stop the effect from working! I think its because both examples have the class name of menu.

  4. I think changing:

    $(this).stop(true, true).switchClass("style1", "style2", 700);

    and

    $(this).stop(true, true).switchClass("style2", "style1", 700);

    should stop animations queueing up.

  5. @Frontlader ah. never noticed that double true-thing before. read docs and works now for me too, thx a lot, front for the hint. single stop did not work at all 🙂

  6. i have been asking about prevent this menue to queue the animation some days ago. i have found the stop()-command, but it seems it does not work for switchClass like it works for animate. any suggestions, or simply impossible there? No one? Adam?

  7. what was the piece of code chaining to put in if you dont want jquery to "store" the mouseovers when there is too much of them, … stop…? anyone knows that, quickly?

Leave a Reply

Your email address will not be published. Required fields are marked *