RockSolid Slider und Jquery Animationen

Hallo Zusammen,

ich habe ein kleines Problem mit Animationen. Ich habe einen RockSolid Slider mit 4 Slides, in zwei Slides befinden sich Elemente die mittels Jquery animiert werden (sollen).
Das Problem ist, daß jeweils nur ein Element animiert wird, das zweite nicht. Sobald ich aber den ersten Slide mit dem animierten Element ausblende, funktioniert das zweite.

Auch wenn ich z.B. den 3. Slide vor den 2. Slide stelle, dann animiert das Element im 3. Slide welcher an zweiter Stelle steht und das im 2. Slide welcher jetzt an dritter Stelle steht tut nichts.Umgekehrt ist es wieder genauso. Ich bin kein Experte deswegen bin ich mit meinem Testen und Probieren ziemlich am Ende. Weiß vielleicht jemand woran das liegen könnte?

Die Skripte sind ziemlich einfach:

$(document).ready(function(){
$(".engel").hover(function(){
$(".engel").animate({top: '-1000px'}, 6000);
});
});



$('.gHover').hover(function() {
$(this).stop().animate({
top: -30
}, 1600, "easeInOutBack");
}, function() {
$(this).stop().animate({
top: 0
}, 1600, "easeInOutBack");
});




Contao-Version ist 3.5.3. Wäre für Tipps dankbar.

Gruß

1. Code immer in [code], [php] oder [html] Tags posten (je nach dem).
2. Poste einen Link zur Seite.

Es handelt sich um diese Seite:

http://www.kanzlei-susanne-gundlach.de/

Dort der untere Slider in Slide 3 sollte das Engelchen nach oben fliegen wenn man darüber fährt mit der Maus.

Hallo.

Pack mal alles in ein Document Ready.

Code:

---

(function($) {

$(document).ready(function(){

  $(".engel").hover(function(){
  $(".engel").animate({top: '-1000px'}, 6000);});

  $('.gHover').hover(function() {
    $(this).stop().animate({
    top: -30
  }, 1600, "easeInOutBack");
  }, function() {
    $(this).stop().animate({
    top: 0
  }, 1600, "easeInOutBack");
  });

});

})(jQuery);

---

Oder was ich da immer gern mache ist ein Timeout.
Dann wird der Script erst nach 200 ms ausgeführt

Code:

---

function explode(){
  alert("Boom!");
}
setTimeout(explode, 200);

---

Falls das alles nicht klappt, könntest du den Klick auf die Pfeile triggern.
Ist sicher nicht die schönste Lösung :) Aber sollte so auch klappen.

Code:

---

(function($) {

$(document).ready(function(){
$( ".rsts-nav li" ).click(function() {

  $(".engel").hover(function(){
  $(".engel").animate({top: '-1000px'}, 6000);});

  $('.gHover').hover(function() {
    $(this).stop().animate({
    top: -30
  }, 1600, "easeInOutBack");
  }, function() {
    $(this).stop().animate({
    top: 0
  }, 1600, "easeInOutBack");
  });
})

});

})(jQuery);

---

PS: alles ungetestet ;).

Liebe Grüße
Matthias

Vielen Dank!

Das mit dem legen auf die Pfeile hat geklappt.

Gruß David

Zitat:

---

Zitat von Messa

Hallo.

Pack mal alles in ein Document Ready.

Code:

---

(function($) {

$(document).ready(function(){

  $(".engel").hover(function(){
  $(".engel").animate({top: '-1000px'}, 6000);});

  $('.gHover').hover(function() {
    $(this).stop().animate({
    top: -30
  }, 1600, "easeInOutBack");
  }, function() {
    $(this).stop().animate({
    top: 0
  }, 1600, "easeInOutBack");
  });

});

})(jQuery);

---

Oder was ich da immer gern mache ist ein Timeout.
Dann wird der Script erst nach 200 ms ausgeführt

Code:

---

function explode(){
  alert("Boom!");
}
setTimeout(explode, 200);

---

Falls das alles nicht klappt, könntest du den Klick auf die Pfeile triggern.
Ist sicher nicht die schönste Lösung :) Aber sollte so auch klappen.

Code:

---

(function($) {

$(document).ready(function(){
$( ".rsts-nav li" ).click(function() {

  $(".engel").hover(function(){
  $(".engel").animate({top: '-1000px'}, 6000);});

  $('.gHover').hover(function() {
    $(this).stop().animate({
    top: -30
  }, 1600, "easeInOutBack");
  }, function() {
    $(this).stop().animate({
    top: 0
  }, 1600, "easeInOutBack");
  });
})

});

})(jQuery);

---

PS: alles ungetestet ;).

Liebe Grüße
Matthias

---