Jcarousel et opacity sur les images encore non visibles
Bonjour à tous,
Je suis en train de créer un carrousel avec JCarousel.
Tout fonctionne, l'animation, le nombre d'items...
Mais je cherche à ce que les images par défaut soient en opacity:0.5 et qu'au moment où elles apparaissent dans la zone visible, elles passent à 1.
J'ai trouvé un code qui joue sur l'opacity, mais pas exactement comme je veux.
Il met toutes les images en opacity 0.5, et seulement au survol, les passent à 1
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
|
var activeOpacity = 1.0,
inactiveOpacity = 0.5,
fadeTime = 350,
clickedClass = "selected",
thumbs = "#mycarousel li img";
jQuery(thumbs).fadeTo(1, inactiveOpacity);
jQuery(thumbs).hover(
function(){
jQuery(this).fadeTo(fadeTime, activeOpacity);
},
function(){
// Only fade out if the user hasn't clicked the thumb
if(!jQuery(this).hasClass(clickedClass)) {
jQuery(this).fadeTo(fadeTime, inactiveOpacity);
}
});
jQuery(thumbs).mouseout(function() {
// Remove selected class from any elements other than this
var previous = jQuery(thumbs + '.' + clickedClass).eq();
var clicked = jQuery(this);
if(clicked !== previous) {
previous.removeClass(clickedClass);
}
clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
}); |
Je ne sais pas si je suis très claire.
Si quelqu'un a une idée!!
Merci d'avance