时间戳

首页 > 解决方案 > 将 jquery hide/fade/delay/animation 转换为纯 js

javascript - 将 jquery hide/fade/delay/animation 转换为纯 js

问题描述

我试图从我的代码中删除 jquery 依赖项，遇到了几行我不知道如何在 js 中复制。

我知道我可以使用 setTimeout() 来代替延迟，使用 css 过渡来淡化，使用 css 来隐藏……只是不知道该怎么做，也无法弄清楚。

任何帮助，将不胜感激。

需要转换为普通 js 的部分有问题：

//loop that actually does the work
(function loopBg(){     
    $topSlide.hide().css({'background' : 'transparent url('+images[++c%n][0]+') '+images[c%n][1]}).delay(6000).fadeTo(2000, 1, function(){
        $bottomSlide.css({'background' : 'transparent url('+images[c%n][0]+') '+images[c%n][1]}); 
        loopBg();
    });
}());

整个原始 jquery 代码：

//2nd position is where it starts from
var images = [
    ['/assets/img/sliders/6-sm.jpg', 'no-repeat scroll center bottom / cover'],
    ['/assets/img/sliders/9-sm.jpg', 'no-repeat scroll center bottom / cover'],
    ['/assets/img/sliders/2-sm.jpg', 'no-repeat scroll center bottom / cover'],
];

var $bottomSlide = $('#intro-anim .slider-bottom'),
    $topSlide = $('#intro-anim .slider-top'),
    n = images.length,
    c = 0; // loop counter

// preload array of images
for(var i=0; i<n; i++){
    var tImg = new Image();
    tImg.src = images[i][0];
}

$bottomSlide.css({
    'background' : 'transparent url('+images[++c%n][0]+') '+images[c%n][1]
}); 

//loop that actually does the work
(function loopBg(){     
    $topSlide.hide().css({'background' : 'transparent url('+images[++c%n][0]+') '+images[c%n][1]}).delay(6000).fadeTo(2000, 1, function(){
        $bottomSlide.css({'background' : 'transparent url('+images[c%n][0]+') '+images[c%n][1]}); 
        loopBg();
    });
}());

我的转换减去相关部分：

//2nd position is where it starts from
const images = [
    ['/assets/img/sliders/6-sm.jpg', 'no-repeat scroll center bottom / cover'],
    ['/assets/img/sliders/9-sm.jpg', 'no-repeat scroll center bottom / cover'],
    ['/assets/img/sliders/2-sm.jpg', 'no-repeat scroll center bottom / cover'],
];

const bottomSlide = document.querySelector('#intro-anim .slider-bottom'),
    topSlide = document.querySelector('#intro-anim .slider-top');

let n = images.length,
    c = 0; //loop counter

//preload array of images
for(let i=0; i<n; i++){
    let tImg = new Image();
    tImg.src = images[i][0];
}

bottomSlide.setAttribute('style', 'background: transparent url('+images[++c%n][0]+') '+images[c%n][1]);

//loop that actually does the work
//still needs converted
//(function loopBg(){       
//  $topSlide.hide().css({'background' : 'transparent url('+images[++c%n][0]+') '+images[c%n][1]}).delay(6000).fadeTo(2000, 1, function(){
//      $bottomSlide.css({'background' : 'transparent url('+images[c%n][0]+') '+images[c%n][1]}); 
//      loopBg();
//  });
//}());

标签： javascriptjquery

解决方案

有点骇人听闻，但复制了与以前相同的行为，这正是我想要的。我会想办法让这个更干净。

要点是顶部滑块更改其图像并淡入。在底部滑块淡入后更改为相同图像，而顶部返回不透明度 0（保持相同图像可见）。每 6 秒重复一次，转到数组中的下一个图像。

//2nd position is where it starts from
const images = [
    ['/assets/img/sliders/6-sm.jpg', 'no-repeat scroll center bottom / cover'],
    ['/assets/img/sliders/9-sm.jpg', 'no-repeat scroll center bottom / cover'],
    ['/assets/img/sliders/2-sm.jpg', 'no-repeat scroll center bottom / cover'],
];

const bottomSlide = document.querySelector('#intro-anim .slider-bottom'),
    topSlide = document.querySelector('#intro-anim .slider-top');

let n = images.length,
    c = 0; //loop counter

//preload array of images
for(var i=0; i<n; i++){
    var tImg = new Image();
    tImg.src = images[i][0];
}

bottomSlide.style.background = 'transparent url('+images[++c%n][0]+') '+images[c%n][1];
topSlide.style.opacity = '0';

//loop that actually does the work
(function loopBg(){
    
    setTimeout(function() {
    
        topSlide.style.background = 'transparent url('+images[++c%n][0]+') '+images[c%n][1];
        topSlide.style.opacity = '1';
        
        setTimeout(function() {
            bottomSlide.style.background = 'transparent url('+images[c%n][0]+') '+images[c%n][1];
            topSlide.style.opacity = '0';
        }, 3000); //css transition for '#intro-anim .slider-top' is 2 seconds so do 3 to be safe and let it finish (6s is the total between slides) 
        
        loopBg();
    }, 6000);       

}());

css 添加了 2s 的过渡：

#intro-anim .slider-top,
#intro-anim .slider-bottom {
    position: absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
}
#intro-anim .slider-top {
    transition: opacity 2s ease-in-out;
}

推荐阅读