反復滑動div左右

Question

我正在嘗試創建一個div，它從屏幕的左側向右移動，反復出現。 我想讓它看起來好像是在軸上擺動。 我有當前的代碼，但是，有時當你加載頁面時，div從左向右移動，然后卡住試圖再次向右移動。

   moveBlock: function(){
    var madeRight = false;
    $('.curBlock').css({"left": "2%"});
    intv = setInterval(function(){
        var curBlock = $('.curBlock');
        if(parseInt($(".curBlock")[0].style.left.replace("%", "")) < 42 && parseInt($(".curBlock")[0].style.left.replace("%", "")) > 1 && !madeRight){
            console.log("hi");
            $('.curBlock').css({"left": parseInt($(".curBlock")[0].style.left.replace("%", "")) + 1+"%"});
        }else if(parseInt($(".curBlock")[0].style.left.replace("%", "")) > 1 || parseInt($(".curBlock")[0].style.left.replace("%", "")) == 42){
            madeRight = true;
            $('.curBlock').css({"left": parseInt($(".curBlock")[0].style.left.replace("%", "")) - 1+"%"});
        }else{
            clearInterval(intv);
        }
    }, 50)
},
  processBlock: function(){
    setInterval(game.moveBlock(), 1000);
  }

任何幫助實現這一點將非常感謝。

謝謝。 :-)

Answer 1

考慮CSS動畫：

 setTimeout(function() { var element = document.getElementById("d1"); document.body.appendChild(element.cloneNode(true)); element.classList.toggle("sidetoside"); }, 2500); 

 @keyframes slide { from { margin-left: 100%; } to { margin-left: 0%; } } .sidetoside { -o-animation: slide 2s linear 0s infinite alternate; -moz-animation: slide 2s linear 0s infinite alternate; -webkit-animation: slide 2s linear 0s infinite alternate; animation: slide 2s linear 0s infinite alternate; } 

 <div id="d1" class="sidetoside"> I'm a div! I move! <p> I'm more text in the div! </p> </div> 

您也可以使用AnimationEvent來響應AnimationEvent中的更改。