Annulation des modifications sur CSS causées par l'effet d'animation à l'aide de jquery.animate () et jquery.scroll () - javascript, jquery, html, css, animation

Existe-t-il un moyen d'inverser les modifications CSS causées par jQuery.animate() selon la position du parchemin? Je travaille sur un site Web où je veux qu'un certain effet d'animation se produise sur un élément lorsqu'un utilisateur fait défiler vers le bas. Après cela, lorsque l'utilisateur fait défiler vers le haut, l'élément doit revenir à son état précédent. un exemple:

$(window).scroll(function(){
if(this.scrollTop() >= 300){  //Scrolling down to a point 300 or more
$(".foo").animate({
"width": 100
"height": 100
}, 500, "swing");
}
});

Comme vous pouvez le voir dans l'extrait ci-dessus, l'effet se produit lorsque l'utilisateur fait défiler vers le bas. Voici ci-dessous un code auquel je peux logiquement penser comment fonctionnera l'effet inverse:

if(this.scrollTop() <= 300) {  //Scrolling down to a point 300 or more
$(".foo").animate({
"width": 10
"height": 10
}, 500, "swing");
}

Cliquez sur LE FIDDLE pour voir le code en action et obtenir un meilleur aperçu.

J'ai vu beaucoup de plugins faire cela cependant, existe-t-il une meilleure façon de faire le scénario mentionné ci-dessus en utilisant simplement jQuery.animate() lié par le jQuery.scroll() ? Si oui, pourriez-vous me montrer un exemple? ou pourriez-vous me diriger vers un lien? Veuillez me guider / me conseiller.

Merci de votre aide !

Réponses:

1 pour la réponse № 1

Vous pouvez utiliser une classe pour cela, créer une classe avec les propriétés que vous souhaitez, dans votre cas

.scrolled {
height: 100px;
width: 100px;
}

Ensuite, ajoutezClasse, il accepte les autres options que vous vouliez, afin que vous puissiez

if(this.scrollTop() >= 300){
this.addClass("scrolled", 500, "swing");
}

if(this.scrollTop() < 300){
this.removeClass("scrolled", 500, "swing);
}

---

1 pour la réponse № 2

Si vous n'avez pas besoin de forcer jquery à éditer le CSS de l'objet, vous pouvez lui dire d'ajouter / supprimer des classes à la place, ce qui vous donnera un effet similaire.

Si le style de votre objet est déjà composé de 10px largeur / hauteur, vous pouvez avoir un style comme

.bar{
height: 100px;
width: 100px;
}

et dans votre code javascript:

if(this.scrollTop() >= 300){
this.addClass("bar");
}

alors vous pouvez juste faire

removeClass("bar");

quand vous n'en avez pas besoin.

https://api.jquery.com/addclass/

https://api.jquery.com/removeclass/

---