jQuery FadeOut не работает после изменения переключателя css z-index

У меня проблемы с исчезновением изображения при переключении с помощью jQuery. Что я делаю, так это сначала скрываю изображение, затем затухаю и увеличиваю z-индекс, чтобы оно отображалось над другим изображением, которое я использую. Это работает нормально, но проблема заключается в том, что он исчезает после наведения (модификация css работает нормально - изображение возвращается к первому изображению, но при этом не исчезает). Вот мой сценарий:

//world map hover
    $(".worldimg").hide();
    $("#worldnumber1").hover(function () {
        $("#world1").fadeIn("slow");
        $("#world1").css('z-index', 200);
    }, function () {
        $("#world1").fadeOut("slow");
        $("#world1").css('z-index', 20);
    });

Буду признателен за помощь ^^


jquery css z-index fadein fadeout
person Lyra Kobi    schedule 17.08.2015    source источник
comment
Можем ли мы получить jsFiddle? :)   -  person Sofiene Djebali    schedule 17.08.2015
comment
когда вы публикуете рабочий JSFiddle со своей проблемой, мы можем воспроизвести ее и легче решить и помочь вам   -  person areim    schedule 17.08.2015

Ответы (2)


arrow_upward
0
arrow_downward

Вам нужно использовать обратный вызов функций fade*(), потому что вам нужно изменить z-index после завершения fadeIn/fadeOut:

//world map hover
$(".worldimg").hide();
$("#worldnumber1").hover(function () {
    $("#world1").fadeIn("slow", function() {
       $(this).css('z-index', 200);
    });
}, function () {
    $("#world1").fadeOut("slow", function() {
        $(this).css('z-index', 20);
    });
});
person Marcos Pérez Gude    schedule 17.08.2015

arrow_upward
0
arrow_downward

Вы можете попробовать события как mouseenter и mouseleave, например:

$(".worldimg").hide();
$("#worldnumber1").mouseenter(function () {
    $("#world1").fadeIn("slow");
    $("#world1").css('z-index', 200);
});
$("#worldnumber1").mouseleave(function () {
    $("#world1").fadeOut("slow");
    $("#world1").css('z-index', 20);
});
person areim    schedule 17.08.2015