Jquery用css float动画 [英] Jquery animate with css float

问题描述

我有一个问题，我的代码，宽度似乎工作，但浮点数。
这是：

i have a problem with my code, the width seems to work but the float no. Here it is:

这里是一个例子：

http://jsfiddle.net/v82ck/

问题：当鼠标悬停时，菜单上的float属性没有改变，我想将每个菜单元素下面的行滑过该菜单元素下面的元素。

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

the code isnt complicated, i just dont know what is happening

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让您可以看到它

the css so you can see it

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

the jquery library that i use is https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

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

i ask you guys because i dont really know how to fix it...

编辑：已经过去了（2年）。如果我不得不这样做，我会去使用一个抽象，如使用像twitter bootstrap一样的框架。没有必要重新发明轮子。

It's been a while (2 years). If i had to do this again, i will go for the use of an abstraction, such as using a framework like twitter bootstrap. There is no need to reinvent the wheel.

推荐答案

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

You cannot use float property for absolutely positioned elements. in fact it doesn't change anything, use position: relative instead.

元素根据hover元素的 width 和 left 偏移量，可以使用 offset 方法和CSS 左属性而不是 float 属性：

It seems you want to position the element according to the width and left offset of the hovered element, you can use offset method and CSS left property instead of float property:

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

这篇关于Jquery用css float动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！