Изменить непрозрачность 2 пунктов при наведении

Question

У меня есть 2 изображения на моей странице.при наведении курсора на img.a непрозрачность меняется на 0 и работает отлично.Однако я хотел бы, чтобы img.c также изменял непрозрачность на 0, когда над ним находится курсор.Мой код работает для img.a, но ничего для img.c

<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
},
function() {
$("img.c").stop().animate({"opacity": "0"}, "slow");
},
function() {
$("img.c").stop().animate({"opacity": "1"}, "slow");
});

});
</script>

Answer 1

Проблема в вашем синтаксисе.

Функция jQuery hover () имеет только два аргумента - две функции. Первый - тот, который вызывается при наведении мыши на элемент, а второй вызывается при наведении мыши.

Вы почти на месте, теперь все, что вам нужно сделать, это объединить 4 функции в две функции, и это будет работать:

<script type='text/javascript'>
$(document).ready(function(){

  $("img.a").hover(

    function() { // this function is called on mouseover img.a
        $(this).stop().animate({"opacity": "0"}, "slow");
        $("img.c").stop().animate({"opacity": "0"}, "slow");
    },
    function() { // this function is called on mouseout img.a
        $(this).stop().animate({"opacity": "1"}, "slow");
        $("img.c").stop().animate({"opacity": "1"}, "slow");
    }

  });

});
</script>

Answer 2

Вместо использования $(this) вы можете использовать $("img.a, img.c") в качестве селектора в функции наведения.

См. эту скрипку для базового примера.

Answer 3

$(function () {
    $("#image1").css("opacity", 0.3);
    $("#image1").hover(function () {
        $(this).animate({ opacity: 1.0 }, 500);
    }, function () {
        $(this).animate({ opacity: 0.3 }, 500);
    });
})

Используйте эту функцию в теге script в html-странице с разделом:

См. Пример в моем блоге ...

Answer 4

Дайте все изображения, которые должны быть выцветшими, одного и того же класса. Затем присвойте всем изображениям, которые должны быть затемнены, одно и то же data-group.

<img class="fade" data-group="a" />
<img class="fade" data-group="b" />
<img class="fade" data-group="a" />

<script type="text/javascript">
$(function(){ /* shorthand for $(document).ready(function(){ */

    $('img.fade').hover(function(){

        $('img.fade[data-group="'+$(this).data('group')+'"]').stop().animate({"opacity": "0"},"slow");

    },function(){

        $('img.fade[data-group="'+$(this).data('group')+'"]').stop().animate({"opacity": "1"},"slow");

    });    

});
</script>

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

Вот мой пример на jsFiddle: http://jsfiddle.net/Rv9jU/