Probleme animate en fonction du scrolltop

Fermé
david - 3 juin 2016 à 16:41
 david - 6 juin 2016 à 11:27
Bonjour,

J'ai un souci avec la fonction animate:

J'ai une image placée en dehors de l'écran via le css.
Quand je scroll, lorsque scrolltop est supérieur à 300, je fais apparaitre mon image avec la fonction animate. ça ça marche!
Par contre quand mon scrolltop est supérieur à 500 je veux faire bouger à nouveau mon image avec la fonction animate et là ça marche pas, je comprend pas pourquoi.
Je peux faire bouger une autre image mais pas plusieurs fois la même...
auriez vous une idée?

Voilà mon code:


$(document).ready(function () {
$(window).scroll(function() {

var scrollTop = parseInt($(window).scrollTop());

if (scrollTop>300 && scrollTop<500){
$('#mario').animate({left:'40%',top:'140%'},600);
}
if (scrollTop>500){
$('#mario').animate({left:'50%',top:'150%'},600);
}
if (scrollTop>500){
$('#luigi').animate({left:'35%',top:'122%'},600);
}
});
})


Merci infiniment!!!

3 réponses

Salut,
curieux en effet.
Peut être en remettant l'élément à ses dimensions originales avant d'appliquer animate() , à tester.
0
J'ai essayer de remplacer les % par des px mais ça change rien, j'ai simplifié mon code au max et pas mieux.
En fait le deuxième déplacement fonctionne mais après une dizaine de secondes...
J'y comprend rien...
0
C'est bon j'ai trouvé, en fait apparement ça lançait plusieurs animations en même temps. Au cas ou ça pourrait aider quelqu'un voila mon nouveau code.

sinon on peut juste mettre un .stop() avant le animate mais je trouve que l'effet est moins fluide.


$(document).ready(function () {
var animScroll;

$(window).scroll(function() {
if (animScroll) return;

var myHeight = $(window).height();
$('#test3').text(myHeight);

function taillescroll(val) {
return ((val*myHeight)/923);
}
var scrollTop = parseInt($(window).scrollTop());
$('#test2').text(scrollTop);

if (scrollTop>taillescroll(300) && scrollTop<taillescroll(1100)){
animScroll = true;
$('#mario').animate({left:'40%',top:'140%'},600, function()
{
animScroll = false;
});
}
if (scrollTop>taillescroll(1100)){
animScroll = true;
$('#mario').animate({left:'-20%',top:'50%'},600, function()
{
animScroll = false;
});
}
if (scrollTop>taillescroll(500)){
animScroll = true;
$('#luigi').animate({left:'35%',top:'122%'},600, function()
{
animScroll = false;
});
}
});
})
0