Un effet de fondu au survol d'un div avec jQuery

Mon problème est hyper simple, mais je suis encore une nouille en javascript alors j'ai du mal.
J'ai un div avec une image d'arrière-plan qui contient l'effet normal et l'effet survolé.
En CSS, ça donne ça :

#monDiv {
background-position : center top;
}
#monDiv:hover {
background-position : center bottom;
}

Tout ce que je voudrais, c'est que la transition se fasse via un petit effet de fondu sympa.

D'ailleurs, en passant, vous connaissez un moyen de se former sur le javascript et jQuery.

Merci beaucoup