javascript - 我在动画按钮悬停 gif 中有错误

Question

这是我的第一篇文章，我需要帮助有人可以修复此代码让我们解释一下

1. 我想要3个按钮
2. 当我拿鼠标到按钮一个播放背景时：gif1（构建 gif 1，当我将鼠标移到按钮悬停播放 gif 2（gif 2 是相同的 gif1 构建的数字，就像反向一样））
3. 当我拿指针按钮 2-3 播放 gif2 到 gif3 和 gif4 到 gif 5

就像当我的指针是 bt1 并且我按下按钮 3 时这样做： gif 1 播放 gif2 并播放 gif 5。当我起飞 gif 播放 gif6

<div class="backgroundimggif">
            <img id="default" src="assets/gif/default4.png" class="back" alt="gifOne">
            <div class="gifOneCop">
                <img id="gif1" src="assets/gif/3.gif" class="hideG  back TH" data-as="1" data-asD="1" alt="gifOne">
                <img id="gif1R" src="assets/gif/4.gif" class="hideG back" data-asD="2"  alt="gifOne">
            </div>
            <div class="gifTwoCop"> 
                <img id="gif2" src="assets/gif/1.gif" class="hideG back TH" data-as="2" data-asD="3"  alt="gifTwo">
                <img id="gif2R" src="assets/gif/2.gif" class="hideG back" data-asD="4" alt="gifTwo">
            </div>
            <div class="gifThreeCop">
                <img id="gif3" src="assets/gif/5.gif" class="hideG back TH" data-as="3" data-asD="5"  alt="gifThree">
                <img id="gif3R" src="assets/gif/6.gif" class="hideG back" data-asD="6" alt="gifThree">
            </div>
        </div>

 //რომელი გიფზე ვართ ეს გვეუბნება
    gifOrder = 0;
    
    //ეს არესეტებს და აჩენს იმ გიფს რომელიც ჩვენ გვინდა 
    function build(order, dest){
        dest.src = dest.src
        document.getElementById(`gif${order}R`).classList.add('hideG')
        dest.classList.remove('hideG')
    }
    //ეს ფუნფქია რევერს არესეტებს და მერე რთავს კიდე გამოჩენილ გიფს აქრობს 
    function back(order){
            document.getElementById(`gif${order}R`).src = document.getElementById(`gif${order}R`).src
            document.getElementById(`gif${order}`).classList.add('hideG')
            setTimeout(function(){
                document.getElementById(`gif${order}R`).classList.remove('hideG')
            }, 0)
    }
    //თიშავს ღილაკებს 2.6 წამით
    function disable(){
        document.querySelector('.build').disabled = true
        document.querySelector('.buildTwo').disabled = true
        document.querySelector('.buildThr').disabled = true
        setTimeout(function (){
            document.querySelector('.build').disabled = false
            document.querySelector('.buildTwo').disabled = false
            document.querySelector('.buildThr').disabled = false   
        }, 2600)
    }
    
    //ეს ჰოვერს უსმენს. მარტო პირველ გიფს ჭირდება +1 იმიტომ რომ რო გავააქტიუროთ giforder უნდა უდრიდეს 1 ამიტომაც ერთს ვუმატებთ
    document.querySelector('.build').addEventListener('mouseenter', ()=>{
        setTimeout(function () {  
        if(gifOrder == 0){
            build(gifOrder+1, document.getElementById('gif1'))
        }else{
            build(gifOrder, document.getElementById('gif1'))
            
        }
        gifOrder = 1
        }, 1000)
    })
    
    
    //ეს უსმენს როცა hover აღარ აკეთებ
    document.querySelector('.build').addEventListener('mouseleave', ()=>{
        //ეს ფუნცქია 1.2 წამით დააგვიანებს
    setTimeout(function(){
            back(gifOrder)    
    }, 1800)
    disable()
    
    })
    //ამის მერე ყველგან იგივე არის აქ არ ვუმატებთ giforder +1
    document.querySelector('.buildTwo').addEventListener('mouseenter', ()=>{
        setTimeout(function () { 
            if(gifOrder == 3){
                console.log(gifOrder);
                build(gifOrder, document.getElementById('gif2'))
                gifOrder = 2 
            }else{ 
                gifOrder = 2 
                console.log(gifOrder);
                build(gifOrder, document.getElementById('gif2'))
            }
         }, 1000)
    })
    
    
    document.querySelector('.buildTwo').addEventListener('mouseleave', ()=>{
    setTimeout(function(){
            back(gifOrder)  
    }, 1800)
        disable()
    
    })
    
    document.querySelector('.buildThr').addEventListener('mouseenter', ()=>{
        setTimeout(function () {  
            gifOrder = 3
            build(gifOrder, document.getElementById('gif3'))
        }, 1000)
        
    })
    
    
    document.querySelector('.buildThr').addEventListener('mouseleave', ()=>{
    setTimeout(function(){
            back(gifOrder)
        }, 1800)
        disable()
    })

标签： javascripthtmlgif