Question

所以，我编写了JavaScript代码，使用JQuery库在悬停时交换类。

$("#workBG").on({
mouseenter : function() {
  $("#workplay").addClass("workBG", 200);
  $("#workplay").removeClass("diagR", 200);
}
,
mouseleave : function() {
  $("#workplay").addClass("diagR", 200);
  $("#workplay").removeClass("workBG", 200);
 }
})

这段代码有效，但是我想让fadeIn和fadeOut类考虑到它交换背景图像，但是它没有fadeIn和fadeOut那么严厉。我见过类似的问题，但它们都来自五六年前，我想知道现在是否还有更好的方法。

从其中一个较旧的问题中，我看到他们已经回答了

.addClass("workBG", 200);

其中200是班级淡出的时间。据我所知，这现在不起作用，或者我做错了。我确实检查了JQuery文档，并且在addClass API文档下没有任何相关内容。

另外：

HTML code：

<div id="workplay" class ="row text-center mt-5 diagR">
  <div class ="col-sm-6 align-self-center changework">
    <p id= "workBG" class ="display-1 font-weight-bold text-warning">WORK.</p>
  </div>
  <div class ="col-sm-6 align-self-center">
    <p id= "playBG" class ="display-1 font-weight-bold">PLAY.</p>
  </div>
</div>

这是与JS相关的html代码，背景通过类应用。

Answer 1

在元素上添加transition属性不要在addClass / removeClass函数中使用第二个参数

＆＃13;

$("#workBG").on({
  mouseenter: function() {
    $("#workplay").addClass("workBG");
    $("#workplay").removeClass("diagR");
  },
  mouseleave: function() {
    $("#workplay").addClass("diagR");
    $("#workplay").removeClass("workBG");
  }
})

＆＃13;

#workplay {
  transition: 2s;
}

.workBG {
  background: red;
}

.diagR {
  background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="workBG">
  <div id="workplay">asdasdasd</div>
</div>

＆＃13;

Answer 2

/ *这对我来说很好，请尝试这个解决方案* /

    $("#workplay").on({
    mouseenter: function() {
        $("#workplay").fadeIn("slow", function() {
            $("#workplay").addClass("workBG");
            $("#workplay").removeClass("diagR");
        });
    },
    mouseleave: function() {
        $("#workplay").fadeIn("slow", function() {
            $("#workplay").addClass("diagR");
            $("#workplay").removeClass("workBG");
        });
    }
});

/ *您可以按原样运行此文件（工作正常）* /

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#workplay").on({
            mouseenter: function() {
                $("#workplay").fadeIn("slow", function() {
                    $("#workplay").addClass("workBG");
                    $("#workplay").removeClass("diagR");
                });
            },
            mouseleave: function() {
                $("#workplay").fadeIn("slow", function() {
                    $("#workplay").addClass("diagR");
                    $("#workplay").removeClass("workBG");
                });
            }
        })
    });
    </script>
    <style>
    #workplay {
      transition: 2s;
    }
    .workBG {
      background: red;
    }
    .diagR {
      background: blue;
    }
    </style>
    </head>
    <body>

    <div id="workplay">
      Please move cursor on me.
    </div>

    </body>
    </html>

在mouseenter上将addClass与fadeIn结合使用

2 个答案: