时间戳

首页 > 解决方案 > jQuery可以顺序执行吗？

javascript - jQuery可以顺序执行吗？

问题描述

我有以下代码：

https://jsfiddle.net/c4zquo60/1/

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 代码中的转换？

标签： javascriptjqueryhtmlcss

解决方案

您必须考虑您在 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 url

<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/

推荐阅读