ansaurus

Question

jQuery hover function

Answer 1

A:

The following complete example worked for me:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"&gt;&lt;/script&gt;
        <script type="text/javascript">
            $(function() {
                var current = $('#' + $('body').attr('id') + '_link');
                var oldLeft = current.position().left + (current.width() / 2) - (arrow.width() / 2);
                var arrow = $('#arrow').css('left', oldLeft);
                $('#navbar li').hover(function() {
                    var h = $(this);
                    var newLeft = h.position().left + (h.width() / 2) - (arrow.width() / 2);
                    arrow.stop().animate({ left: newLeft }, {
                        duration: 'slow',
                        //easing: 'easeOutBack'
                    });
                }, function() {
                    arrow.stop().animate({ left: oldLeft }, {
                        duration: 'slow',
                        //easing: 'easeOutBack'
                    });
                });
            });
        </script>
        <style type="text/css">
            #navbar { margin: 0; padding: 0; overflow: auto; }
            #navbar li { list-style: none; margin: 0; padding: 0; float: left; }
            #navbar li a { margin: 1em; }
            #arrow { background-color: #f00; height: 3px; width: 10px; left: 0; position: absolute; }
        </style>
    </head>
    <body id="resume">
        <div id="arrow"></div>
        <ul id="navbar">
            <li id="home_link"><a href="/">home</a></li>
            <li id="portfolio_link"><a href="portfolio.php">portfolio</a></li>
            <li id="resume_link"><a href="resume.php">resume</a></li>
            <li id="photos_link"><a href="photography.php">photos</a></li>
            <li id="blog_link"><a href="blog/">blog</a></li>
        </ul>
    </body>
</html>

Notice how your easing method of easeOutBack is commented out. As per the jQuery API the only valid easing methods are linear and swing. I hope this at least gives you some insight to your problem.

Jake Wharton 2010-04-21 13:41:56

ansaurus

tags:

views:

answers:

jQuery hover function

related questions