在列表项悬停时更改图像时添加淡入/淡出效果的问题

Posted 2023-03-06

【中文标题】在列表项悬停时更改图像时添加淡入/淡出效果的问题

【英文标题】：Issuse with adding FadeIn/Out effect when changing image on list item hover

【发布时间】：2021-11-11 08:06:57

【问题描述】：

我已成功创建菜单，其中包含通过菜单列表项悬停更改照片的选项。 但是当照片从一张变为另一张时，我有一个添加淡入/淡出效果的问题。

代码如下：

<div id="menu">
    <img src="menu1.jpg" >
    <ul>
        <li><a data-image="menu1.jpg" href="#">Item 1</a></li>
        <li><a data-image="menu2.jpg" href="#">Another item</a></li>
        <li><a data-image="menu3.jpg" href="#">One more item</a></li>
    </ul>
</div>
<!-- /#menu -->

<script>
    var image = $('#menu').find('img').attr('src');
        $('#menu ul li a').mouseover(function() 
            var currentImage = $(this).attr('data-image');
            $(this).parent().parent().parent().find('img').attr('src', currentImage);

        );
</script>

我尝试过类似的方法，但没有成功

$('#menu ul li a').mouseover(function() 
    $(this).parent().parent().parent().find('img').hide().attr('src', currentImage).fadeIn(2000);
, function () 
    $(this).parent().parent().parent().find('img').fadeOut(2000,function()
      $(this).parent().parent().parent().attr('src', currentImage).fadeIn();
    );
);

【参考方案1】：

只需将您的 JS 脚本替换为：

您需要通过ID或类名调用图像：id="loadImage" 先淡出

隐藏

图像然后.fadeIn();

html：

<div id="menu">
    <ul>
        <li><a data-image="1.jpg" href="#">Item 1</a></li>
        <li><a data-image="2.jpg" href="#">Another item</a></li>
        <li><a data-image="3.jpg" href="#">One more item</a></li>
    </ul>
    <img src="1.jpg"  id="loadImage">
</div>

JS：

$(document).ready(function () 
    $('#menu ul li a').on("mouseover", function() 
        var currentImage = $(this).attr('data-image');
        $("#loadImage").attr('src', currentImage).hide().fadeIn();
    );
);