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
C’est aussi très bogué si vous quittez l’animation, voici la mise à jour:
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); });
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? 🙂
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