Jquery 更改不同屏幕大小的动画

我正在制作一个动画，当用户点击一个元素时，我会显示一个div，动画从左开始：700px

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


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

---

它适用于1280 x 800的屏幕大小，问题是当屏幕大小增加时，动画文本会出现在左栏div上。如果您有任何帮助，将不胜感激

媒体查询与现代化-

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

---

这里有更多信息：

我想用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);
        }
    }
});

var aniParams=[{'max'：1000，“left'：600}，{'max'：800，“left'：400}]//大>小
$（“#elem”）
.on（'单击'，函数（））{
对于（变量i=0；i如果（$（window）.width（）你能用链接在JSFIDLE中显示你的html代码或css吗？你可以先检查屏幕大小，然后使用相应的应用样式。或者你可以在
%
中给
左
，这样会自动调整。是的。互动程序：为不同的屏幕大小更改动画