Jquery - mouse -> fade in / out // click -> l'opacità al 100% // altro click -> opacità 60
Domanda
Iam lavorando su un sito web con jQuery e miniature.
Quando la pagina viene caricata tutte le miniature devono essere su 60% di opacità. Non appena si va con il mouse sopra un pollice di cui ha bisogno a svanire al 100%, se si sposta con il mouse fuori la miniatura deve svanire back up sul 60% di opacità.
Quando l'utente clicca su una miniatura che deve rimanere al 100% di opacità. Non appena l'utente fa clic su un altro miniatura miniatura 'vecchia' ha a svanire di nuovo al 60% e la 'nuova' si deve rimanere al 100%. (Che ha già al 100% di opacità, perché si va con il mouse su di esso).
Questo è il codice che ho finora:
$(window).bind("load", function() {
$("#mycarousel li").fadeTo(1, 0.6);
$("#mycarousel li").hover(function(){
$(this).fadeTo(350, 1.0);
$(this).addClass('Active');
},function(){
$("this:not('.Active')").fadeTo(350, 0.6);
});
});
Qualsiasi aiuto sarebbe apprezzato.
Greatings, Bas
Soluzione
$(window).bind("load", function() {
var activeOpacity = 1.0,
inactiveOpacity = 0.6,
fadeTime = 350,
clickedClass = "selected",
thumbs = "#mycarousel li";
$(thumbs).fadeTo(1, inactiveOpacity);
$(thumbs).hover(
function(){
$(this).fadeTo(fadeTime, activeOpacity);
},
function(){
// Only fade out if the user hasn't clicked the thumb
if(!$(this).hasClass(clickedClass)) {
$(this).fadeTo(fadeTime, inactiveOpacity);
}
});
$(thumbs).click(function() {
// Remove selected class from any elements other than this
var previous = $(thumbs + '.' + clickedClass).eq();
var clicked = $(this);
if(clicked !== previous) {
previous.removeClass(clickedClass);
}
clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
});
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow