Fadein Hover с постепенным переходом в исходное состояние или онкликом остается в состоянии наведения

Question

Здравствуйте, я новичок в jQuery и Javascript!

Что мне нужно сделать, это:

веб-сайт с jquery и миниатюрами.

Когда страница загружена, все миниатюры должны быть на 60% непрозрачности.Как только вы наводите указатель мыши на большой палец, он должен постепенно исчезнуть до 100%, а если вы двигаете мышкой наружу, миниатюра должна постепенно исчезнуть на 60% непрозрачности.

Когда пользователь нажимает наминиатюра должна оставаться на 100% непрозрачности.Как только пользователь нажимает на другую миниатюру, «старая» миниатюра должна исчезнуть до 60%, а «новая» должна остаться на 100%.(он уже имеет 100% непрозрачность, потому что вы наводите на него мышью).

Answer 1

Вот, пожалуйста, демоверсия:

http://jsfiddle.net/sg3s/UtU8G/

При наведении на анимацию, не зависайте, если заблокированы, при щелчке исчезайте другие и блокируйте эту.

Редактировать

В качестве бонуса, вот версия, в которой вы можете заблокировать несколько миниатюр с помощью Ctrl.

http://jsfiddle.net/sg3s/UtU8G/6/

Answer 2

$(document).ready(function(){
    $("#image").mouseover(function (){
       $(this).fadeTo("slow", 1)
    });

   $("#image").mouseout(function (){
       $(this).fadeTo("slow", 0.6);
   });
});

Посмотрите на jsFiddle Я настроил тест, чтобы показать, как это работает