Как бы я уменьшил непрозрачность значка с помощью jQuery?

Question

У меня есть этот набор иконок,

<div class="nav">
<a href="/ask" title="Ask Question"><img id="icon"
src="http://static.tumblr.com/ctwb3zj/4KZlie2ck/08-chat.png"></a>
<a href="/random" title="Random"><img class="icon1" id="icon"    
src="http://static.tumblr.com/ctwb3zj/oOFlie27f/05-shuffle.png"></a>
<a href="/archive" title="Archive"><img id="icon"
src="http://static.tumblr.com/ctwb3zj/G1Glie23v/11-clock.png"></a>
</div> 

И при наведении курсора я бы хотел, чтобы они стали менее прозрачными.Я не хочу вызывать изображения с использованием Javascript ... Это достаточно просто?

Answer 1

Вам нужно исправить этот HTML, чтобы использовать атрибут class.У вас не может быть нескольких элементов с одним и тем же атрибутом id.

<div class="nav">
<a href="/ask" title="Ask Question"><img class="icon"
src="http://static.tumblr.com/ctwb3zj/4KZlie2ck/08-chat.png"></a>
<a href="/random" title="Random"><img id="icon1" class="icon"    
src="http://static.tumblr.com/ctwb3zj/oOFlie27f/05-shuffle.png"></a>
<a href="/archive" title="Archive"><img class="icon"
src="http://static.tumblr.com/ctwb3zj/G1Glie23v/11-clock.png"></a>
</div>

Затем используйте этот jQuery:

$('img.icon').hover(
    function() {
        console.log('hello');
        $(this).stop().animate({ opacity: 0.5 });
    },

    function() {
        $(this).stop().animate({ opacity: 1.0 });
    }
);

, который оживит значок до 50% непрозрачности наввод мыши и возврат на 100% при отпускании мыши.

jsFiddle

Answer 2

Попробуйте это:

$(function(){
    $('.icon').hover(function(){
        $(this).stop().fadeTo("slow", 0.4);
    }, function(){
        $(this).stop().fadeTo("slow", 1);
    });
});

Answer 3

Во-первых, вы не можете иметь несколько элементов с одинаковым id, поэтому id="icon" должно стать class="icon", затем вы можете добавить эти функции наведения с помощью jQuery:

$('.icon').hover(function() {
    $(this).fadeTo(500, .3);
}, function() {
    $(this).fadeTo(300, 1);
});

Где первое число в fadeTo() - это продолжительность, а второе - непрозрачность при наведении и наведении соответственно.

Answer 4

В зависимости от потребностей вашего браузера вы можете использовать CSS3 opacity с селектором: hover. Нет необходимости в jQuery, прекрасно работает в современных браузерах (Gecko, Webkit, Opera ... может быть, IE9, но я не могу это проверить).

Добавьте CSS следующим образом:

img:hover{opacity:0.50;}