jQuery animate top top

J’ai un script sur jsfiddle: http://jsfiddle.net/kX7b6/

Rien ne se passe en vol stationnaire

En vol stationnaire, je veux que la zone verte chevauche la zone rouge avec une marge négative de -50 pixels Rien ne se passe.

L’animation fonctionne, mais pas la marge

Juste pour montrer que l’animation elle-même fonctionne, j’ai ajouté une fonction d’opacité à l’animation. margin-top est réglé sur 0px inline aussi loin que je peux voir.

Vous avez eu MarginTop au lieu de marginTop

http://jsfiddle.net/kX7b6/1/

C’est aussi très bogué si vous quittez l’animation, voici la mise à jour:

http://jsfiddle.net/kX7b6/3/

Remarque: je l’ai modifiée en mouseenter et mouseleave car je ne pense pas que l’intention était d’annuler l’animation lorsque vous survolez la zone rouge ou verte.

utilisez 'marginTop' au lieu de MarginTop

 $(this).find('.info').animate({ 'marginTop': '-50px', opacity: 0.5 }, 1000); 

vérifier ce même effet avec moins de code

 $(".item").mouseover(function(){ $('.info').animate({ marginTop: '-50px' , opacity: 0.5 }, 1000); }); 

http://jsfiddle.net/sandeep/kX7b6/4/

MarginTop devrait être marginTop .

 $(this).find('.info').animate({'margin-top': '-50px', opacity: 0.5 }, 1000); 

Pas de marge. Ça marche

Comme dit marginTop – pas MarginTop.

Aussi, pourquoi ne pas l’animer en retour? 🙂

Voir: http://jsfiddle.net/kX7b6/2/

Je ne savais pas que le “.stop ()” est nécessaire.

 $(window).scroll(function () { var scroll = $(window).scrollTop(); console.log(scroll); if (scroll >= 50){ $('.sidebar-padder').stop().animate({ 'height': '380px'}, 1000); }else{ $('.sidebar-padder').stop().animate({ 'height': '600px'}, 1000); }; 

utilisez le code suivant pour appliquer une marge

 $(".button").click(function() { $('html, body').animate({ scrollTop: $(".scrolltothis").offset().top + 50; }, 500); }); 

Voir cette ans: Faites défiler vers le bas pour div + une certaine marge