Fadein hover with fade to initial state or onclick remains in hover

Question

Hi, I am new to jQuery and Javascript!

What do I need to do:

with jquery and thumbnails.

When loading the page, all thumbnails should be at 60% opacity. As soon as you go with the mouse over the thumb, it should disappear to 100%, if you move the mouse, the thumbnail should disappear at 60% opacity.

When the user clicks on the thumbnail, he should remain at 100% opacity. As soon as the user clicks on another sketch, the "old" thumbnail should disappear up to 60%, and the "new" should remain at 100%. (it already has 100% opacity because you click on it).

Answer 1

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

Take a look at jsFiddle. I installed a test to show how it works.

Answer 2

There you have it, demo:

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

When you hover over an animation, do not freeze, if it is locked, others click out and block it.

Edit

As a bonus, here is a version in which you can lock multiple toggle switches using ctrl.

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