jquery - Cross-fade div on mouse hover -
i want background image change when mouse hovers on each menu item. code works but, when images fadeout , fadein , there white flash in between. remove it, want images cross-fade instead of fading out , in. how can achieve this? $(document).ready(function() { $(".home-menu-list li a").mouseenter(function() { var bannerclass = '#home-banner-' + $(this).attr('id'); $('.active-banner').not(bannerclass).stop().fadeout().removeclass('active-banner'); $(bannerclass).stop().fadein().addclass('active-banner'); }); }); .main-banner-wrapper img { height: 50px; width: 100%; object-fit: cover; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-fluid "> <div id="home-banner-1" class="active-banner"> <div class="main-banner-wrapper"> <img...