Jquery animate with css float

问题:

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

HERE IS AN EXAMPLE:

http://jsfiddle.net/v82ck/

THE PROBLEM: the float property on the menu when hovering doesnt change, i want the line below each menu element to slide below the element when hovering that menu element.

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");     }); }); 

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

this is the part that is conflicting

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>  

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

---

EDIT: 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.

回答1:

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

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 animate with css float