Jquery - наведение курсора мыши -> включение / выключение // щелчок -> непрозрачность 100% // другой щелчок -> непрозрачность 60
Вопрос
Я работаю над веб-сайтом с jquery и миниатюрами.
Когда страница загружена, все миниатюры должны быть непрозрачными на 60%.Как только вы наведете курсор мыши на большой палец, он должен исчезнуть до 100%, если вы переместите курсор мыши, миниатюра должна снова исчезнуть до 60% непрозрачности.
Когда пользователь нажимает на миниатюру, она должна оставаться непрозрачной на 100%.Как только пользователь нажимает на другую миниатюру, "старая" миниатюра должна уменьшиться до 60%, а "новая" должна остаться на уровне 100%.(он уже имеет 100% непрозрачность, потому что вы наводите на него курсор мыши).
Это код, который у меня есть на данный момент:
$(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);
});
});
Будем признательны за любую помощь.
Великие дела, Бас
Решение
$(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);
});
});
Не связан с StackOverflow