JQuery - animation on multiple elements

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

  1. Wratox1

    Wratox1 Member

    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:
    Code:
    // 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");
        
        $magicLineTwo
            .width($(".current_page_item_two").width())
            .height($mainNav2.height())
            .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();
            $magicLineTwo.stop().animate({
                left: leftPos,
                width: newWidth,
                backgroundColor: $el.attr("rel")
            })
        }, function() {
            $magicLineTwo.stop().animate({
                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:
    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]-->
    
    <head>
    	<meta charset='UTF-8'>
    	
    	
    	
    	<link rel='stylesheet' href='css/style.css'>
    	<title>WWD</title>
    	<!--[if lt IE 9]>
    	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    	<![endif]-->
    		
        <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>
    </head>
    
    <body>
            
        <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>
            </ul>
            
        </div>
    	
    	<div id="container">
    		
    	</div>
    			
    </body>
    
    </html>
    if you have any questions, just ask :)

    //Wratox

Share This Page