2011-10-18 39 views
30

Ho uno script su jsfiddle: http://jsfiddle.net/kX7b6/jQuery animare margine superiore

Nulla accade al passaggio del mouse

al passaggio del mouse voglio casella verde di sovrapporre la casella rossa con un -50px margine negativo. Non accade nulla.

L'animazione funziona, ma non il margine

solo per dimostrare che l'animazione stessa sta lavorando Ho aggiunto una funzione di opacità al l'animazione. margin-top è impostato su 0px in linea per quanto posso vedere.

+0

Si prega di condividere il codice jQuery – SiN

risposta

58

Hai avuto MarginTop invece di marginTop

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

E 'anche molto buggy se si lascia a metà l'animazione, qui è aggiornamento:

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

Nota ho cambiato in mouseenter e mouseleave perché non penso che l'intenzione fosse di annullare l'animazione quando si passa con il mouse sopra l'area rossa o verde.

23

uso 'marginTop' invece di MarginTop

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

MarginTop dovrebbe essere marginTop.

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

Not MarginTop. Funziona

1

non sapevo che il ".Stop()" è necessaria .

$(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); 
}; 
0

utilizzare il seguente codice per applicare un certo margine

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

Vai a questa ans: Scroll down to div + a certain margin