Question

所以我有一个悬停功能，应该在有人盘旋的链接下移动一个箭头。问题是，当此人停止悬停在链接上时，箭头永远不会返回当前链接。但是，如果我使用常量值正确设置左侧，则可以正常工作。有人有什么想法吗？

这是js：

$('#navbar li').hover(function(event) {
    var currentId = '#' + $('body').attr('id') + '_link';
    var xCordCurrent = $(currentId).offset().left - ($('#arrow').width() / 2);
    var xCordHover = $(event.target).offset().left + ($(event.target).width() / 2) - ($('#arrow').width() / 2);
        $('#arrow').animate(
        { left: xCordHover }, {
            duration: 'slow',
            easing: 'easeOutBack'
        })  
    }, function(event) {
        $('#arrow').animate(
        { left: xCordCurrent }, {
            duration: 'slow',
            easing: 'easeOutBack'
        })
    });

这是html：

<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>

Answer 1

以下完整示例对我有用：

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
        <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>

注意easeOutBack的缓动方法是如何被注释掉的。根据{{3}}，唯一有效的宽松方法是linear和swing。我希望这至少能让你对自己的问题有所了解。

jQuery悬停功能

1 个答案: