jQuery Animation

[lozel]

Hallo Leute,
ich versuche seit Tagen eine gescheite jQuery Animation hinzukriegen. Allerdings gelingt es mir nicht so.

Ich möchte eine Dropdownliste erstellen, mit folgender Animation:

In jedem Listenpunkt ist ein Bild. Der Listenpunkt ist mit overflow: hidden auf eine Höhe von 84px gesetzt. Nun soll das Bild ausgetauscht werden durch ein größeres, dann soll der Listenpunkt animiert werden und zwar in die Höhe bis man das ganze neue Bild sieht. Dann soll das Untermenü runter geslided werden.

Leider komme ich nicht drauf, wie man sowas realisieren kann.

<ul id="topNavigation">
<li>
<a href="#">A</a>
<img src="images/test.gif" alt="A" />
<ul>
<li>B</li>
<li>C</li>
</ul>
</li>
</ul>

[suit]

Leider komme ich nicht drauf, wie man sowas realisieren kann.

Durch geschickte Kombination von mehreren animate()-Aufrufen mithilfe von Chaining und Callback-Funktionen.

[LX]

Wie sieht denn Dein Javascript-Code im Moment aus? Etwa so ähnlich wie:

$('#topNavigation li').mouseenter(function() {  
   $('img', this).attr(src, 'hier kommt das neue Bild hin');  
   $(this).animate({'height':'180px'});  
}).mouseleave(function() {  
   $(this).animate({'height':'84px'}, function() {  
       $('img', this).attr(src, 'hier wieder das alte');  
   });  
});

Gruß, LX

[suit]

mouseenter(function()

gibts einen speziellen Grund warum du hier nicht bind() verwendest?

$('img', this).attr(src, 'hier kommt das neue Bild hin');

und hier nicht find()?

[LX]

Sogar 2:

mouseenter(function()
gibts einen speziellen Grund warum du hier nicht bind() verwendest?

Kürzerer Code.

$('img', this).attr(src, 'hier kommt das neue Bild hin');
und hier nicht find()?

Schnellerer Code.

Gruß, LX

[lozel]

Ja, ich hatte eine ähnlich Version, aber nur mit .hover(). Allerdings spielen sich bei mir die Animationen nicht NACHEINANDER ab, sondern da wird z.B das Untermenü schneller ausgeklappt, als dass das Bild ersetzt worden ist oder die richtige Höhe erreicht wurde.

Eine Idee ?

[suit]

Ja, ich hatte eine ähnlich Version, aber nur mit .hover(). Allerdings spielen sich bei mir die Animationen nicht NACHEINANDER ab, sondern da wird z.B das Untermenü schneller ausgeklappt, als dass das Bild ersetzt worden ist oder die richtige Höhe erreicht wurde.

Wie ich bereits sagte: Callback.