1
J'apprends lentement comment modifier et écrire jQuery à partir de zéro et j'ai essayé de modifier un code pré-écrit, ce qui fait simplement une opacité de l'image: 1 et toutes les autres images dans la même opacité de l'élément HTML: 0.2. Lorsque j'utilise fadeTo et que je me déplace rapidement sur les images, il arrête de faire l'animation et reste suspendu jusqu'à ce qu'il se répare. Quelqu'un pourrait-il conseiller sur cette situation."fadeTo" semble avoir un bug quand je fais défiler les images trop vite
Désolé d'être un peu Vauge :)
Voici le code:
$(window).load(function(){
var spotlight = {
// the opacity of the "transparent" images - change it if you like
opacity : 0.2,
/*the vars bellow are for width and height of the images so we can make
the <li> same size */
imgWidth : $('#portfolio ul li').find('img').width(),
imgHeight : $('#portfolio ul li').find('img').height()
};
//set the width and height of the list items same as the images
$('#portfolio ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight });
//when mouse over the list item...
$('#portfolio ul li').hover(function(){
//...find the image inside of it and add active class to it and change opacity to 1 (no transparency)
$(this).find('img').addClass('active').fadeTo('fast', 1);
//get the other list items and change the opacity of the images inside it to the one we have set in the spotlight array
$(this).siblings('li').find('img').fadeTo('fast', 0.2);
//when mouse leave...
}, function(){
//... find the image inside of the list item we just left and remove the active class
$(this).find('img').removeClass('active');
});
//when mouse leaves the unordered list...
$('#portfolio ul').bind('mouseleave',function(){
//find the images and change the opacity to 1 (fully visible)
$(this).find('img').fadeTo('fast', 1);
});
});