javascript - jquery animate with css float

Question

我的代码有问题，宽度似乎有效，但 float 没有。在这里:

这是一个例子:

http://jsfiddle.net/v82ck/

问题:悬停时菜单上的 float 属性没有改变，我希望每个菜单元素下方的行在悬停该菜单元素时滑到该元素下方。

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

JavaScript:

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

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

---

编辑:已经有一段时间了(2 年)。如果我不得不再次这样做，我会选择使用抽象，比如使用像 twitter bootstrap 这样的框架。无需重新发明轮子。

Answer 1

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

看来你想根据悬停元素的width和left偏移来定位元素，你可以使用offset方法和CSS left 属性而不是 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/