2009-06-08 10 views
1
helfen

Dies ist meine Website: http://keironlowe.x10hosting.com/Javascript oder jQuery

Ich muss wissen, wie die rote Linie länger langsam zu machen, erhalten, wenn über schweben und langsam wieder auf die normale Größe schrumpfen danach Javascript oder jQuery verwenden.

Könnte mir jemand etwas zeigen, um in die richtige Richtung zu kommen?

Antwort

0

können Sie jQuery verwenden animate etwas zu einem Element zu tun, die eine Dauer Parameter, die definiert, wie lange es sollte dauern, bis die Animation zu vervollständigen. Dann gibt es die hover Funktion, die eine Reihe von Funktionen übernimmt. Das ist also die allgemeine Idee:

$('div', '#nav_container').hover(function() { 
    // this gets called on hover 
    $(this).animate({width: 'XXXpx'}, 10000); // 10000 = 10 seconds   
}, function() { 
    // this gets called on mouseout 
    $(this).animate({width: 'XXXpx'}, 10000); // 10000 = 10 seconds 
}); 

EDIT:

Soweit Ihren Kommentar, wenn der Code in der <HEAD> ist, müssen Sie den Code in document.ready wickeln:

$(document).ready(function() { 
    // put the code you tried here 
}); 
+0

Ich kann nicht scheinen, dass das funktioniert. Ive erhielt

+0

Um, nimm das
am Start –

+0

Seine Arbeit aber ive bekam Probleme. Ich möchte die Größe erhöhen, wenn ich den Mauszeiger darüber bewege, und wenn ich den Mauszeiger wegnehme, wird wieder die normale Größe angezeigt. Aber der Code erhöht den Wert und kehrt dann zum Hover-Modus zurück. Es funktioniert auch nur einmal. Ich muss aktualisieren, damit es wieder funktioniert –

2

Etwas wie folgt aus:

$('#nav_container div').hover(
    function(){$(this).find('img').animate({width:'100%'},{queue:false,duration:500});}, 
    function(){$(this).find('img').animate({width:'auto'},{queue:false,duration:500});} 
); 
Verwandte Themen