我正在创建一个jQuery背景更改脚本。该脚本正在运行，但是当我添加一些淡入动画时，它会变得有点小虫。当您将鼠标悬停在文本上2-3次时，几秒钟内什么都没有显示。我已经尝试过此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BG CHNAGE</title>
</head>
<body style="background-color: #1f1f1f; height: 100vh !important; padding-top: 0;">
<div class="box" style="height: 100vh !important; background-repeat: no-repeat; background-size: cover;">
<div class="row">
<div class="col-sm-12 col-md-6 p-5">
<div class="content">
<a href="#" target="_blank">
<h3 class="content-title button" >800ezer</h3>
</a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".button").mouseover(function() {
var imageUrl = "https://images.freeimages.com/images/small-previews/bd7/falloxbow-1058032.jpg";
$(".box").hide().css("background-image", "url(" + imageUrl + ")").fadeIn(800);
});
$(".button").mouseout(function() {
var imageUrl = "";
$(".box").hide().css("background-image", "url(" + + ")").fadeIn(800);
});
});
</script>
</body>
</html>
请尝试以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BG CHNAGE</title>
</head>
<body style="background-color: #1f1f1f; height: 100vh !important; padding-top: 0;">
<div class="content">
<a href="#" target="_blank">
<h3 class="content-title button" >800ezer</h3>
</a>
</div>
<div class="box" >
<div class="row">
<div class="col-sm-12 col-md-6 p-5">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".button").mouseover(function() {
$(".box").addClass('bg');
});
$(".button").mouseout(function() {
$(".box").removeClass( 'bg');
});
});
</script>
<style>
.box{
-webkit-transition: ease all 0.9s;
-moz-transition: ease all 0.9s;
-ms-transition: ease all 0.9s;
transition: ease all 0.9s;
background-repeat: no-repeat;
background-size: cover;
height: 100vh !important;
opacity: 0;
}
.box.bg{
background-image: url(https://images.freeimages.com/images/small-previews/bd7/falloxbow-1058032.jpg);
-webkit-transition: ease all 0.9s;
-moz-transition: ease all 0.9s;
-ms-transition: ease all 0.9s;
transition: ease all 0.9s;
opacity: 1;
}
</style>
</body>
</html>