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动画

回答

相关问题