Question

我有四个按钮，用淡入淡出过渡来切换背景图像，它工作正常但是 - 当我在它们之间快速移动时，淡入淡出会丢失。

我想要的是在第二次开始之前强制完成第一次淡出。

这可能吗？

JS

$(".first-button").hover(function(){
    $('.intro').toggleClass('intro-2')
});

$(".second-button").hover(function(){
    $('.intro').toggleClass('intro-3')        
});

$(".third-button").hover(function(){
    $('.intro').toggleClass('intro-4')        
});

$(".fourth-button").hover(function(){
    $('.intro').toggleClass('intro-5')        
});

HTML

<div class="intro">
    <ul>
       <li><a href="#" class="first-button">Caption 1</a></li>
       <li><a href="#" class="second-button">Caption 2</a></li> 
       <li><a href="#" class="third-button">Caption 3</a></li>
       <li><a href="#" class="fourth-button">Caption 4</a></li>
    </ul>
</div>

CSS

.intro {
background: url('img/image.jpg');
transition: background 300ms ease-in 0s;
}

.intro-2 {
background: url('img/image-1.jpg');
transition: background 300ms ease-in 0s;
}

.intro-3 {
background: url('img/image-2.jpg');
transition: background 300ms ease-in 0s;
}

.intro-4 {
background: url('img/image-3.jpg');
transition: background 300ms ease-in 0s;
}

.intro-5 {
background: url('img/image-4.jpg');
transition: background 300ms ease-in 0s;
}

感谢您的帮助。

Answer 1

也许您正在寻找.fadeToggle()：

$(function() {
        $('.first-button').hover(function() {
            $('.intro').delay(300).fadeToggle();
        });
});

OR

$(function() {
        $('.first-button').hover(function() {
            $('.intro').fadeToggle(300);
        });
});

相同的其他按钮或只是在选择器中添加两个类。或者添加一个对两者都很常见的新类（如果总计> 2则更好）

在另一个开始之前强制切换完成

1 个答案: