JQuery - Maus über -> Fade-in / out // klicken -> Opazität 100% // andere Klick -> Opazität 60
Frage
Iam arbeitet auf einer Website mit jquery und Thumbnails.
Wenn die Seite geladen wird, alle Thumbnails auf 60% der Undurchsichtigkeit sein. Sobald Sie mit der Maus über einen Daumen gehen muss es auf 100% verblassen, wenn Sie mit der Maus bewegen sich die Miniaturansicht auf 60% der Undurchsichtigkeit zurück bis verblassen muss.
Wenn der Benutzer auf eine Miniaturansicht klicken, um es zu 100% Opazität bleiben müssen. Sobald der Anwender auf ein anderes Vorschaubild, um das ‚alte‘ Thumbnail hat zurück auf 60% verblassen und die ‚neuen‘ hat man bei 100% bleiben. (Es hat bereits 100% Opazität, weil Sie mit der Maus über sie gehen).
Dies ist der Code, den ich habe bisher:
$(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);
});
});
Jede mögliche Hilfe würde geschätzt.
Greatings, Bas
Lösung
$(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);
});
});