Question

我有以下代码：

CSS：

#bg {
    background-repeat: no-repeat;
    position: absolute;
    top:0;bottom:0;left:0;right:0;
    width:100wh;
    height:100vh;
    z-index: -1;
    opacity: 0;
    -webkit-transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
}

的jQuery

$(function() {
    $('#triggerModel').hover(function () {
        $("#bg").css({'opacity':0});
        $("#bg").css({'background-image': "url('backgroundModel.jpg')"});
        $("#bg").css({'opacity':1});
    });
});
$(function() {
    $('#triggerArt').hover(function () {
        $("#bg").css({'opacity':0});
        $("#bg").css({'background-image': "url('backgroundArt.jpg')"});
        $("#bg").css({'opacity':1});
    });
});
$(function() {
    $('#triggerDev').hover(function () {
        $("#bg").css({'opacity':0});
        $("#bg").css({'background-image': "url('backgroundDev.jpg')"});
        $("#bg").css({'opacity':1});
    });
});

我对编程的理解有限，编译器应该按顺序执行每一行。例如，它不应该读取$("#bg").css({'opacity':0});，知道将不透明度设置为0，然后读取$("#bg").css({'background-image': "url('backgroundModel.jpg')"});来切换背景图像，然后第三行再次使不透明度为1？

当页面加载时，根据CSS代码，背景图像的不透明度为0且未加载图像。当我将鼠标悬停在元素上时，它会正确显示动画。但当我将鼠标悬停在另一个（3个）导航元素上时，它会忽略不透明度缓动，并直接切换到下一个背景图像。

有没有办法强制jQuery按顺序执行指令？我是否需要在每个函数之间设置延迟以等待转换？或者jQuery在第一次执行后是不是只识别CSS代码中的转换？

Answer 1

您必须考虑您在css中指定的延迟。因为JS / jQuery并不了解它。

也就是说，您可以使用mouseover（）和mouseout（）来使其更好地工作

$(function() {
    $('#triggerModel').mouseover(function () {
           $("#bg").css({'opacity':1});
           $("#bg").css({'background-image': "url('https://i.imgur.com/QZ5H6bo.jpg')"});
    }).mouseout(function(){
           $("#bg").css({'opacity':0});
    });


    $('#triggerArt').mouseover(function () {
           $("#bg").css({'opacity':1});
           $("#bg").css({'background-image': "url('https://i.imgur.com/tS8WsBm.jpg')"});
    }).mouseout(function(){
             $("#bg").css({'opacity':0});
    });

    $('#triggerDev').hover(function () {
           $("#bg").css({'opacity':1});
       $("#bg").css({'background-image': "url('https://i.imgur.com/b4V9l6u.jpg')"});
    }).mouseout(function(){
             $("#bg").css({'opacity':0});
    });

});

此处https://jsfiddle.net/mw3v49vt/ 这更接近你想要的假设

修改

对HTML / DOM的更改：请注意，我删除了 ID 并将其更改为类然后我添加了标签 data-bgimg ，其中包含指向背景img的链接。那种方式当你想在某处添加类似的效果时您所要做的就是更改 data-bgimg 网址

<div class="interactiveBackground" data-bgimg="https://i.imgur.com/b4V9l6u.jpg" style="float:right;"> <a href="#"><img src="https://i.imgur.com/VrVx9iQ.jpg" alt=""/></a> </div>

可重用的JS代码：我们指向类 interactiveBackground 然后使用 $（this）引用具有 interactiveBackground 的DOM对象我们刚刚触发。并定位其 data-bgimg 属性并将其读入背景变量。

$(function() { $('.interactiveBackground').mouseover(function(){ var background = $(this).attr('data-bgimg'); $('#bg').css({'opacity':1}); $("#bg").css({'background-image':"url('" + background + "')" }); }).mouseout(function(){ $("#bg").css({'opacity':0}); }); });

https://jsfiddle.net/02en3973/

jQuery可以顺序执行吗？

1 个答案: