Jquery 动画与 CSS 浮动

我的代码有问题，宽度似乎可以工作，但浮动没有。 这里是：

这是一个例子：

http://jsfiddle.net/v82ck/ http://jsfiddle.net/v82ck/

问题：悬停时菜单上的浮动属性不会改变，我希望每个菜单元素下方的线在悬停该菜单元素时滑到该元素下方。

代码并不复杂，我只是不知道发生了什么

脚本语言:

    $(document).ready(function () { 
    $('#line-menu').css({ //initial state
        'float': 'left',
         'width' : $('#menu-1').width(),
    });
    $('#menu-1').hover(function(){ //first menu element
        var width = $(this).width();

        $('#line-menu').animate({
            'float': 'left',
            'width' : width
        },  "slow");
    });
    $('#menu-2').hover(function(){ //second menu element

        var width = $(this).width();

        $('#line-menu').animate({ 
            'float': 'none', 
            'width' : width
        },  "slow");
    });
    $('#menu-3').hover(function(){ //third menu element

        var width = $(this).width();

        $('#line-menu').animate({
            'float': 'right',
            'width' : width
        },  "slow");
    });
});

css，这样你就可以看到它

CSS:

#line-menu{
    height: 3px;
    width: 100px;
    position:absolute;
    z-index:50;
    background: #CC0000;
    margin-left:55px;
    padding-left:3px;
    padding-right:3px;
}
#line-menu-container{
    text-align: center;
    min-width: 617px;
    max-width: 1113px;
    margin-left: auto;
    margin-right: auto;
}

这是矛盾的部分

HTML:

<header> 
    <div id='menu'>
        <div class='menu-element' id='menu-1'>HORARIOS</div>
        <div class='menu-element' id='menu-2'>UBICACI&Oacute;N</div>
        <div class='menu-element' id='menu-3'>CONTACTO</div>
    </div>
</header>

   <div id='line-menu-container'> //the line contained in a container just to fix the centered position
       <div id='line-menu' ></div>
   </div> 

我使用的 jquery 库是https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

我问你们是因为我真的不知道如何解决它......

EDIT:已经有一段时间了（2年）了。如果我必须再次这样做，我会选择使用抽象，例如使用像 twitter bootstrap 这样的框架。没有必要重新发明轮子。

你不能使用float绝对定位元素的属性。事实上它不会改变任何东西，使用position: relative反而。

看来你想根据width and left悬停元素的偏移量，您可以使用offset方法和 CSSleft财产而不是float财产：

$(document).ready(function () {    
    var $first = $('#menu-1'), $line = $('#line-menu');
    $line.css({
        'width' : $first.width(),
        'left'  : $first.offset().left
    });
    $('#menu > div').mouseenter(function(){
        var $this = $(this),
            width = $this.width(),
            left  = $this.offset().left;

        $line.stop().animate({
            'left'  : left,
            'width' : width
        },  "slow");
    });
});

http://jsfiddle.net/2dwJR/ http://jsfiddle.net/2dwJR/