我有一個簡單的頁面，我想使用安裝程式在按鈕上輸入來更改背景影像影像。我在后臺得到了三個按鈕。
問題是，我想添加淡入淡出效果，我做了什么（我在 CSS 中添加了過渡：1.5s）。但是，當我在按鈕之間移動太快時，淡入/淡出效果無法正常作業。
$(document).ready(function() {
var svatba = $(".svatbauvod");
var promo = $(".promouvod");
var after = $(".afteruvod");
var pozadi = $(".uvod-body");
svatba.on('mouseenter', function() {
pozadi.css('background-image', 'url(img/uvod1.jpg)');
});
promo.on('mouseenter', function() {
pozadi.css('background-image', 'url(img/uvod2.jpg)');
});
after.on('mouseenter', function() {
pozadi.css('background-image', 'url(img/uvod3.jpg)');
});
});.uvod-body {
background-image: url("/img/uvod1.jpg");
background-size: cover;
height: 100vh;
width: auto;
outline: 3px solid red;
display: flex;
justify-content: center;
align-items: center;
transition: 1.5s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<main class="uvod-body">
<div class="uvod-back">
<h1><a href="#" class="svatbauvod">Svatební videa</a></h1>
<h1><a href="#" class="promouvod">Promo videa</a></h1>
<h1><a href="#" class="afteruvod">After movie</a></h1>
</div>
</main>
</body>uj5u.com熱心網友回復：
如果您將影像移動到類并使用 jQuery 更改這些類中的哪些是活動的，則可以使用本機 CSS 過渡來實作您的效果。
這是一個示例。我無權訪問您參考的影像，因此我使用了顏色。淡化效果是一樣的。
請注意，我們正在使用addClass()和removeClass()。通過在空格分隔的字串中指定它們，您可以一次添加或洗掉多個類。
我已將其中一個類應用于要啟動的元素。這類似于background-image您申請的財產。
$(document).ready(function() {
var svatba = $(".svatbauvod");
var promo = $(".promouvod");
var after = $(".afteruvod");
var pozadi = $(".uvod-body");
svatba.on('mouseenter', function() {
pozadi.addClass('uvod1').removeClass('uvod2 uvod3');
//.css('background-image', 'url(img/uvod1.jpg)');
});
promo.on('mouseenter', function() {
pozadi.addClass('uvod2').removeClass('uvod1 uvod3');
//.css('background-image', 'url(img/uvod2.jpg)');
});
after.on('mouseenter', function() {
pozadi.addClass('uvod3').removeClass('uvod1 uvod2');
//.css('background-image', 'url(img/uvod3.jpg)');
});
});.uvod-body {
/* background-image: url("/img/uvod1.jpg"); */
background-size: cover;
height: 100vh;
width: auto;
outline: 3px solid red;
display: flex;
justify-content: center;
align-items: center;
transition: 1.5s;
}
.uvod1 {
/* background-image: url("/img/uvod1.jpg"); */
background-color: red;
}
.uvod2 {
/* background-image: url("/img/uvod2.jpg"); */
background-color: green;
}
.uvod3 {
/* background-image: url("/img/uvod3.jpg"); */
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<main class="uvod-body uvod1">
<div class="uvod-back">
<h1><a href="#" class="svatbauvod">Svatební videa</a></h1>
<h1><a href="#" class="promouvod">Promo videa</a></h1>
<h1><a href="#" class="afteruvod">After movie</a></h1>
</div>
</main>
</body>uj5u.com熱心網友回復：
您可以直接更改背景，但大部分樣式應使用 CSS 完成 - 因此我們可以改為觸發一個類（或設定一個“CSS 檢測到”的屬性）。在這里，我使用顏色進行演示，還使用您的背景，然后根據您懸停的位置切換類 - 祖父母擁有您所說的過渡，這很有效。
我-two為:hover您在 CSS 中看到的添加了一組類只是為了表明這一點 - 但那是元素而不是它的祖父元素。（那里沒有過渡，但您可以像在祖父母中一樣將其添加到 CSS 中 - 但這并不是您真正的問題。
請注意，有一個 CSS:has()可以解決“父”的問題，但在撰寫本文時并未得到廣泛支持。
$(function() {
let svatba = $(".svatbauvod");
let promo = $(".promouvod");
let after = $(".afteruvod");
let pozadi = $(".uvod-body");
svatba.on('mouseenter', function() {
pozadi.addClass('svatbauvod-in')
.removeClass('promouvod-in afteruvod-in');
});
promo.on('mouseenter', function() {
pozadi.addClass('promouvod-in')
.removeClass('svatbauvod-in afteruvod-in');
});
after.on('mouseenter', function() {
pozadi.addClass('afteruvod-in')
.removeClass('svatbauvod-in promouvod-in');
});
});.uvod-body,
.uvod-body-two {
background-image: url("/img/uvod1.jpg");
background-size: cover;
height: 100vh;
width: auto;
outline: 3px solid red;
display: flex;
justify-content: center;
align-items: center;
transition: 1.5s;
}
.uvod-body.svatbauvod-in,
.svatbauvod-two:hover {
background-image: url("/img/uvod1.jpg");
background-color: #ddffff;
}
.uvod-body.promouvod-in,
.promouvod-two:hover {
background-image: url("/img/uvod2.jpg");
background-color: #ffddff;
}
.uvod-body.afteruvod-in,
.afteruvod-two:hover {
background-image: url("/img/uvod3.jpg");
background-color: #ffffdd;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<main class="uvod-body">
<div class="uvod-back">
<h1><a href="#" class="svatbauvod">Svatební videa</a></h1>
<h1><a href="#" class="promouvod">Promo videa</a></h1>
<h1><a href="#" class="afteruvod">After movie</a></h1>
</div>
</main>
<main class="uvod-body-two">
<div class="uvod-back-two">
<h1><a href="#" class="svatbauvod-two">Svatební videa</a></h1>
<h1><a href="#" class="promouvod-two">Promo videa</a></h1>
<h1><a href="#" class="afteruvod-two">After movie</a></h1>
</div>
</main>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/388683.html
標籤：javascript html 查询 css