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

Question

I have a list of menu items generated dynamically (wordpess menu). I have the code set up now that depending on which menu item is hovered over, it adds a css class "Proj1, proj2, etc" to an image box ".show". the Proj1 Proj2 classes each have a different background image so effectively the image box switches the image depending on which menu item is hovered over. All good there.

What I can't seem to do is find a way to make the images fade in and out when being switched.

I've been pulling my hair out for weeks, please help me 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 is using 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

Sounds like you want to use the callback on fadeOut to execute changes when they finish their animations.

You can also avoid looking up array indices by storing extra information on your <li> elements in data-* attributes

<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 wrote an elegant solution:

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