关于淡入/淡出时的图像替换的Jquery悬停功能

Jquery hover function regarding image replacement on fadein/fadeout

本文关键字:图像 替换 Jquery 功能 悬停 淡出 于淡入 淡入      更新时间:2023-09-26

当第三个div悬停在上面时,我试图替换两个不同div的图像链接。我怎么能这样做呢?因为我的jquery不正确,也不简洁。我确实意识到我不能再做两次了。哈哈。如有任何帮助,我们将不胜感激。谢谢

$('#minerallink').hover(function() { // On mouseenter
    $('#brainicon, #stomachicon').stop(true, true).fadeOut(function() { // Fade out the image, and when done
    $(this).attr('src', 'health-tips/images/images/medicineman-icons-dark_01.png', ).fadeIn();
    $(this).attr('src', 'health-tips/images/images/medicineman-icons-dark_04.png').fadeIn(); // Change its source and fade in
    });
    $('#manpic5').stop(true, true).fadeOut(function() { // Fade out the image, and when done
    $(this).attr('src', 'health-tips/images/images/medicineman-dark_05.png').fadeIn(); // Change its source and fade in
    });
 }, 
 function() { // On mouseleave - reverse the process
    $('#brainicon, #stomachicon').stop(true, true).fadeOut(function() {
        $(this).attr('src', 'health-tips/images/images/medicineman-icons_01.png').fadeIn();
        $(this).attr('src', 'health-tips/images/images/medicineman-icons_04.png').fadeIn();
         });
    $('#manpic5').stop(true, true).fadeOut(function() {
        $(this).attr('src', 'health-tips/images/images/medicineman_05.png').fadeIn();
    });
 });

像这样拆分2个id:

$('#stomachicon').stop(true, true).fadeOut(function() {
    $(this).attr('src', 'health-tips/images/images/medicineman-icons-dark_04.png').fadeIn();
});
$('#brainicon').stop(true, true).fadeOut(function() {
    $(this).attr('src', 'health-tips/images/images/medicineman-icons-dark_01.png', ).fadeIn();
});

并对其余执行此操作