setInterval + jQuery窗口大小的CSS動畫

我試圖解決這個問題，我嘗試了各種方法，雖然邏輯上它應該工作，但它沒有。任何幫助都會很棒，因爲我在編碼方面不夠好。setInterval + jQuery窗口大小的CSS動畫

所以我試圖從左側到右側結束動畫一個對象。定位因屏幕尺寸而異。

這是迄今爲止我得到的。我正在檢測用戶的瀏覽器大小，但是我想要在任何新的大小調整檢測時都銷燬setIntervals。

showViewportSize(); 
var $box = $('#box'); 

$(window).resize(function (e) { 
    window.clearInterval('animation'); 
    showViewportSize(); 
}); 

function showViewportSize() { 
    var width = $(window).width(); 
    var height = $(window).height(); 

    if (width <= 1024) { 
     var box = setInterval(function() { 
      $box.animate({ 
       "left": "+1200" 
      }, 40000, function() { 
       $box.removeAttr("style"); 
      }); 
     }, 400); 
    } 

    if ((width <= 1440) && (width > 1025)) { 
     var box = setInterval(function() { 
      $box.animate({ 
       "left": "+1200" 
      }, 40000, function() { 
       $box.removeAttr("style"); 
      }); 
     }, 400); 
    } 

    if (width >= 2000) { 
     var box = setInterval(function() { 
      $box.animate({ 
       "left": "+1200" 
      }, 40000, function() { 
       $box.removeAttr("style"); 
      }); 
     }, 400); 
    } 
}

來源

2013-04-04 user2245534

你卡在哪個部分？只要摧毀setIntervals？爲此，只需將'setInterval'返回的值存儲到一個全局變量（不是本地'var box'）中，並調用'clearInterval'就可以了。 – drquicksilver 2013-04-04 15:27:10

除了我下面的CSS3解決方案之外，您的問題可能是您的showViewportSize（）函數在每次調整大小迭代時都會調用。目前的行爲是什麼？ – dsundy 2013-04-04 15:53:06

如何將CSS3轉換與良好的ol媒體查詢混合在一起？

#box { 
    left: 0; 

    -webkit-transition: left 0.4s ease-in-out; 
    -moz-transition: left 0.4s ease-in-out; 
    -o-transition: left 0.4s ease-in-out; 
    transition: left 0.4s ease-in-out; 
} 

@media screen and (min-width : 1024px) { 
    #box { 
     left: 1200px; 
    } 
}

應該可以工作但沒有測試過。

來源

2013-04-04 15:34:20 dsundy

setInterval + jQuery窗口大小的CSS動畫

回答

相關問題