JQuery - animation on multiple elements

Discussion in 'General Webmaster Support' started by Wratox1, Mar 13, 2012.

  1. Wratox1

    Wratox1 Member

    +22 / 0 / -0
    Hello, i am using a modified version of a jquery menu called "magic line", the demo can be found here. I am using the second menu.

    im not experienced with jquery, i do know some javascript, but it feels like jquery is much harder to understand..

    well, now to the problem, i have my menu with 3 <li> elements and i have also 3 links, what i want is that when you hover over the links i want the same effect on the links AND on the <li> elements, but the effect should not be applied on the links when you hover over a <li> element.

    not sure if that made sense, but, when you hover one of the links, the corresponding <li> element and the link should have this animation
    but it should only work one way.

    here is the code used for the effect:
    // DOM Ready
    $(function() {
        var $el, leftPos, newWidth;
            $mainNav2 = $("#example-two");
            EXAMPLE TWO
        $mainNav2.append("<li id='magic-line-two'></li>");
        var $magicLineTwo = $("#magic-line-two");
            .css("left", $(".current_page_item_two a").position().left)
            .data("origLeft", $(".current_page_item_two a").position().left)
            .data("origWidth", $magicLineTwo.width())
            .data("origColor", $(".current_page_item_two a").attr("rel"));
        $("#example-two a").hover(function() {
            $el = $(this);
            leftPos = $el.position().left;
            newWidth = $el.parent().width();
                left: leftPos,
                width: newWidth,
                backgroundColor: $el.attr("rel")
        }, function() {
                left: $magicLineTwo.data("origLeft"),
                width: $magicLineTwo.data("origWidth"),
                backgroundColor: $magicLineTwo.data("origColor")
        /* Kick IE into gear */
        $(".current_page_item_two a").mouseenter();
    and here is my html:
    <!DOCTYPE html>
    <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
    <!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
    <!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
    <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    	<meta charset='UTF-8'>
    	<link rel='stylesheet' href='css/style.css'>
    	<!--[if lt IE 9]>
    	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
        <script src='js/jquery.color-RGBa-patch.js'></script>
        <script src='js/example.js'></script>
        <div class="nav-wrap">   
    			<a href="#" id="logo">W</a><a href="#"id="logo2">W</a><a href="#" id="logo3">D</a>
            <ul class="group" id="example-two">
                <li class="current_page_item_two"><a rel="#990000" name="about" href="./index.php">About</a></li>
                <li><a rel="#334D80" name="portfolio" href="./portfolio.php">Portfolio</a></li>
                <li><a rel="#C09440" name="contact" href="./contact.php">Contact</a></li>
    	<div id="container">
    if you have any questions, just ask :)


Share This Page