时间戳

首页 > 解决方案 > 添加淡入/淡出 jQuery hover addclass/remove

jquery - 添加淡入/淡出 jQuery hover addclass/remove

问题描述

我有一个动态生成的菜单项列表（wordpess 菜单）。我现在设置了代码，根据悬停在哪个菜单项上，它会向图像框“.show”添加一个 CSS 类“Proj1、proj2 等”。Proj1 Proj2 类每个都有不同的背景图像，因此图像框根据悬停在哪个菜单项上有效地切换图像。那里一切都好。

我似乎无法做的是找到一种方法让图像在切换时淡入淡出。

我已经把头发拔了好几个星期了，请帮助我 Obi-Wan Kenobi

var image=["proj1","proj2","proj3","proj4","proj5","proj6","proj7","proj8","proj9","proj10","proj11","proj13","proj14","proj15","proj16","proj17","proj18","proj19","proj20","proj21","proj22","proj23","proj24","proj25","proj26","proj27","proj28","proj29","proj30","proj31","proj32" ];

$(".list-group li").hover(function(){
  var value=  $(this).index();
  hoverContent(value);
});
function hoverContent(value){
    $("#list-content div").removeClass('show');
    $("#list-content div:nth-child("+value+")").addClass("show");
    $("#bg").removeClass().fadeOut();
    $("#bg").addClass(image[value]).fadeIn();
}

html 正在使用 wordpress php

    <div id="bg" class="content">
        <div id="list-content">
           <div class="show"> </div>
        </div>
    </div>

    <div class="menuItems">
        <ul class="list-group">
            <li><a href="www.link.html">Menu Item 1</a></li>
            <li><a href="www.link.html">Menu Item 1</a></li>
            <li><a href="www.link.html">Menu Item 1</a></li>
            <li><a href="www.link.html">Menu Item 1</a></li>
            <li><a href="www.link.html">Menu Item 1</a></li>
        </ul>
    </div>

标签： jqueryshowfadeonhover

解决方案

@Shikkediel 写了一个优雅的解决方案：

https://jsfiddle.net/n62bqpym

var image = ['proj1', 'proj2', 'proj3', 'proj4', 'proj5'];

$('.list-group li').hover(function() {
  hoverContent($(this).index());
});

function hoverContent(value) {
  $('#list-content div').removeClass('show').eq(value).addClass('show');
  $('#bg').attr('class', image[value]);
}

推荐阅读