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

时间:2018-04-23 10:59:13

标签: jquery

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

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

这可能吗?

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;
}

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

也许您正在寻找.fadeToggle()

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

OR

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

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