简体   繁体   中英

Jquery hover function regarding image replacement on fadein/fadeout

I'm trying to replace image links for two different divs when the third div is being hovered over. How can I do this cause my jquery is not correct and not concise. I do realize that I cant do double this.attr haha. Any help would be appreciated. Thanks.

$('#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();
    });
 });

split the 2 id's like so:

$('#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();
});

and do this for the rest

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM