JQuery - mouse sobre -> fade in / out // clique -> opacidade 100% // outro clique -> opacidade 60
Pergunta
Iam trabalhando em um website com jQuery e miniaturas.
Quando a página é carregada todas as miniaturas tem que estar em 60% de opacidade. Assim que você vai com o mouse sobre um polegar ele precisa desaparecer a 100%, se você se mover com o mouse as necessidades em miniatura a desvanecer-se back-up em 60% de opacidade.
Quando o usuário clicar em uma miniatura que tem que ficar a 100% de opacidade. Assim que o usuário clique em outro miniatura do 'velho' em miniatura tem a desvanecer-se de volta para 60% e o 'novo' um tem que ficar em 100%. (Que já tem 100% de opacidade, porque você vai com o mouse sobre ele).
Este é o código que eu tenho até agora:
$(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);
});
});
Qualquer ajuda seria apreciada.
Greatings, Bas
Solução
$(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);
});
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow