在列表项悬停时更改图像时添加 FadeIn/Out 效果的问题

Question

我已成功创建菜单，其中包含通过菜单列表项悬停更改照片的选项。但是当照片从一张换到另一张时，我无法添加淡入淡出 in/out 效果。

代码如下：

<div id="menu">
    <img src="menu1.jpg" alt="">
    <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();
    });
});

Answer 1

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

您需要通过 ID 或 class 名称调用图像：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" alt="" 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();
    });
});

在列表项悬停时更改图像时添加 FadeIn/Out 效果的问题

Issuse with adding FadeIn/Out effect when changing image on list item hover

css

jquery

fade

hover

html-lists