如何在鼠标离开另一个具有 HTML 数据的元素时淡出背景图像

Question

我试图在用户将鼠标悬停在锚标记上时产生效果，这样父 div 将在特定背景中淡出（不同锚的背景不同）。我得到的结果还可以，但没有我想要的那么顺利。

这是 jsfiddle link：https://jsfiddle.net/GJL2K/8cwcdthe/6/

这里是 Javascript:

$(function () {
    $('.description').hide();
    $('.page-right li a').on('mouseenter', function(event) {
           // console.log(this);
           event.stopPropagation();

           var $background = "url('" + $(this).attr('data-background') + "')";

           $(this).parents('.page-right')
               .find('#back')
               .stop()
               .animate({opacity: .5}, 0)
               .css({'background': $background})
               .animate({opacity: .75}, 1000);
    });

    //    $('.page-right li a').on('mouseleave', function(event) {
    //        $('.description').slideUp();
    //        // console.log(this);
    //        event.stopPropagation();
    //                      
    //        $(this).parents('.page-right').find('#back')
    //            .stop
    //            .animate({opacity: .5}, 0)
    //            .css({'background': 'none'})
    //            .animate({opacity: 1}, 1000, 'easeInQuad', 
    //                function () {$('.description').slideUp();
    //        });    
    //    });

    $('.page-right li a').on('click', function(event) {
            event.preventDefault();
            $(this).parent().next().slideToggle('fast');
    });
});

问题是，当您将鼠标悬停在下一个 link 上时，第一个背景消失，下一个跳到它的位置。最好让第一个背景在下一个背景淡入之前淡出，但是正如您从注释代码中看到的那样，我没有弄清楚 mouseleave 事件。

我看了其他代码，我想我可能走错了路。我宁愿有一个 fadeOut/fadeIn 效果，它似乎有更平滑的过渡，但我只看到它适用于两个背景图像，而不是我需要的所有图像。

如何使此图像过渡更加顺畅和无缝？

Answer 1

使用您提供的内容，我能够更流畅地在图像之间制作动画。这是 mouseenter 处理程序：

$('.page-right li a').on('mouseenter', function(event) {
    // console.log(this);
    event.stopPropagation();

    var $background = "url('" + $(this).attr('data-background') + "')";
    var $element = $(this)
        .parents('.page-right')
        .find('#back')
        .stop();

    $element.fadeOut(500, function() {
        $element
            .css({'background': $background})
            .fadeIn(500);
    });
});

请注意，fadeOut 调用使用回调来启动后台交换，然后启动相应的 fadeIn。由于 animate 调用是异步的，之前的代码只是在动画期间替换了背景，这就是过渡不流畅的原因。这样就流畅多了

工作的 jsFiddle 可以在这里找到：https://jsfiddle.net/mgaskill/29tjauov/

当然，还可以进行其他改进，尤其是预加载图像，这将是一个很好的后续问题。

如何在鼠标离开另一个具有 HTML 数据的元素时淡出背景图像

How to fade out a background image on mouse leave of another element with HTML data

jquery

css

jquery-animate

datasource

mouseover