Jquery animieren mit css float

ich habe ein problem mit meinem code, die Breite scheint zu funktionieren, aber die schweben nicht.
Hier ist es:

HIER IST EIN BEISPIEL:

http://jsfiddle.net/v82ck/

DAS PROBLEM: die Eigenschaft float auf das Menü, wenn die Maus nicht ändern, ich will die Linie unter jedem Menü-element zu gleiten unterhalb des Elements, wenn die Maus das Menü-element.

der code ist nicht kompliziert, ich weiß nur nicht, was passiert ist

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, so können Sie es

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

dies ist der Teil, bei dem ein Konflikt

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>

die jquery-Bibliothek, die ich benutze, ist https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

Frage ich Euch da ich nicht wirklich weiß, wie es zu beheben...

EDIT: Es ist schon eine Weile (2 Jahre). Wenn ich dies wieder tun, ich werde gehen, für die Nutzung von Abstraktion, wie die Verwendung eines Frameworks wie twitter bootstrap. Es gibt keine Notwendigkeit, das Rad neu zu erfinden.

  • Willkommen ALSO. Bitte posten Sie ein live-Beispiel und definieren das eigentliche problem.
  • Dank ive veröffentlicht ein live-Beispiel und definiert das eigentliche problem @elclanrs
  • Möchten Sie etwas, das ein css-tricks.com/jquery-magicline-navigation ?
  • yess, ich werde es mal ausprobieren und Euch wissen lassen, danke !
InformationsquelleAutor Guido Celada | 2012-12-29
  1. 3

    Können Sie nicht verwenden float - Eigenschaft für absolut positionierte Elemente. in der Tat ist es nicht etwas ändern, verwenden Sie position: relative statt.

    Scheint es, Sie wollen, positionieren Sie das element entsprechend der width und left offset der betreffende element, die Sie verwenden können offset Methode und CSS - left - Eigenschaft anstelle der float Eigenschaft:

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

    • ich habe gerade versucht, und es hat nicht funktioniert
    • Warum wollen Sie verwenden float Eigenschaft gibt es?
    • weil die Menü-Elemente sind 3 und Sie passen sich der Bildschirmgröße verwenden Sie besser die Eigenschaft float.
    • das problem mit der left-Eigenschaft ist, dass sich die statische und wenn ich die Größe der Fenster, die Linie nicht, bleiben Sie unter dem Menü-element
    InformationsquelleAutor undefined
Schreibe einen Kommentar