添加淡入/淡出 jQuery 懸停 addclass/remove

Question

我有一個動態生成的菜單項列表（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>  

Answer 1

聽起來您想在它們完成動畫時使用fadeOut的回調來執行更改。

您還可以通過在data-*屬性中存儲<li>元素的額外信息來避免查找數組索引

<li data-proj="proj1"> <!-- 👈 note the data attribute and value -->
  <a href="http://www.link.html">Menu Item 1</a>
</li>

$(".list-group li").hover(function() {
  const li = $(this)
  const proj = li.data("proj")
  const index = li.index()

  $("#list-content div")
    .removeClass("show")
    .eq(index).addClass("show")

  $("#bg").fadeOut("fast", function() {
    $(this).removeClass().addClass(proj).fadeIn()
  })
}

Answer 2

@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]);
}