Показать скрыть opaque div

Question

У меня есть галерея изображений, с которой мне хотелось бы поскорее начать работу, а затем, когда пользователь накладывает на них наложение мыши, изображение исчезает до полного изображения.

Я знаю, что это легко сделать с несколькими изображениями и т. Д., Но мне было интересно, можно ли использовать деления с прозрачностью, установленной на определенный уровень, когда страница загружается, а затем, когда пользователь наводит указатель мыши на изображение показывает правильное изображение и исчезает div.

В моей голове это кажется довольно простой идеей, но проблемы с поиском вариантов, которые не связаны с удвоением изображений.

Answer 1

CSS:

img { 
    opacity: 0.5; 
    -webkit-transition: opacity 0.5s linear; 
} 
img:hover { 
    opacity: 1; 
    -webkit-transition: opacity 0.5s linear; 
} 

JQuery:

$('img').css('opacity',0.5); 
$('img').hover(
    function(){ 
     $(this).stop().animate({opacity: 1}, 500); 
    }, 
    function(){ 
     $(this).stop().animate({opacity: 0.5}, 500); 
    }); 

JS Fiddle demo of both of the above techniques.

---

Чтобы ориентировать эти элементы, которые делают не матч селектором, вы можете использовать:

$('#jQueryOnlyV2 img:not(".noFading")').css('opacity',0.5); 
$('#jQueryOnlyV2 img:not(".noFading")').hover(
    function(){ 
     $(this).stop().animate({'opacity':1},500); 
    }, 
    function(){ 
     $(this).stop().animate({'opacity':0.5},500); 
    }); 

в котором селектор сопоставляется все изображения, которые не имеют CSS class="noFading", которые содержатся в элементе с id="jQueryOnlyV2".

Этот синтаксис синтаксиса CSS3 :not() CSS3, хотя jQuery not() можно было бы использовать аналогичным образом, если хотите.

Revised jQuery demo.

Answer 2

$("#gallery img") 
    .css('opacity', 0.2) 
    .mouseover(function() { 
     $(this).animate({opacity: 1}, 100); 
    }) 
    .mouseout(function() { 
     $(this).animate({opacity: 0.2}, 100); 
    }); 

See it in action