改变不同屏幕尺寸的动画

Question

我正在制作一个动画，当用户点击一个元素时，我正在显示一个带左边动画的div：700px

$("#maharashtra").click(function(){


    $("#mainbg").hide();
    $("#divmaha").animate({left:"800px"});
    $("#divmaha").show() ;

它适用于1280 x 800的屏幕尺寸，问题是当屏幕尺寸增加时，动画文字会越过左列div。任何帮助都会感激不尽。

Answer 1

使用Modernizr进行媒体查询 -

if (Modernizr.mq('(max-width: 800px)')) {
    //your code
}

更多信息：http://modernizr.com/docs/#mq

Answer 2

我会尝试使用jQuery这样的东西：

var aniParams = [{'max':1000, 'left':600},{'max':800, 'left':400}]; //big > small

$('#elem')
.on('click', function(){
    for(var i = 0; i < aniParams.length; ++i){
        if($(window).width() <= aniParams[i].max){
            $('#aniElem')
            .animate({
                'left':aniParams[i].left + 'px'
            }, 1000);
        }
    }
});