J’ai le code ci-dessous qui fonctionne bien, mais je veux aussi déplacer l’image vers le bas 10px et revenir à la souris, ainsi que ramener l’opacité à 0,7.
$('#drinksList section a img').load(function() { $(this).data('height', this.height); }).bind('mouseenter mouseleave', function(e) { $(this).stop().animate({ opacity: 1, height: $(this).data('height') * (e.type === 'mouseenter' ? 1.05 : 1) }); });
Toute aide serait appréciée.
Voici:
$('#drinksList section a img').load(function() { $(this).data('height', this.height); }).bind('mouseenter mouseleave', function(e) { var enter = e.type === 'mouseenter', height = $(this).data('height'); $(this).stop().animate({ 'margin-top': (enter ? 10 : 0), opacity: (enter ? 1 : 0.7), height: height * (enter ? 1.05 : 1) }); });
Démo en direct: http://jsfiddle.net/simevidas/YwU9u/
Essaye ça:
$('#drinksList section a img').hover(function() { $(this).stop().animate({ opacity: 1.0, top: '+=10' // move it down by 10px }, 1000); // 1000 is the animation time in milliseconds }, function() { $(this).stop().animate({ opacity: 0.7, top: '-= 10' // move it back up }, 1000); });
Donnez-lui un coup de feu
$('.image').each(function() { var top = parseInt($(this).css('top')); var height = $(this).height(); var width = $(this).width(); $(this).hover(function() { $(this).stop().animate({ opacity: 1.0, top: top + 10, height: height + 10, width: width + 10 }, 100); }, function() { $(this).stop().animate({ opacity: 0.7, top: top, height: height, width: width }, 100); }); });