当我调整大小时，我的效果无法正常工作

Question

我用 css 媒体查询和 jquery 在不同分辨率下给出了一些效果。 İf 我以任何分辨率重新加载这不是问题。但是当我调整屏幕大小时通常不会。我知道，我的英语不好，但如果你尝试，我希望你能理解。我也尝试 (window).resize 但这并不能解决我的问题。谢谢你。问题也出在开头部分（关于我）。

演示：You can try here

代码：

$(document).ready(function(){


        var width = $(window).width()+17;

        if(width>=1366){
            $('#pp img:eq(0)').animate({
            'right':'0'
        },2000);

            $('#yazi').animate({
                'left':'10%'
            },2000);
        }

        if((width>=601) && (width<=1365)){
            $('#pp img:eq(1)').animate({
                'margin-top':'0'
            },1000);

            $('#yazi').animate({
                'left':'25%'
            },1000);
        }
});

Answer 1

试试这个：

$(document).ready(function(){
  foo();

  $(window).resize(foo);      
});


function foo(){
   var width = $(window).width()+17;

    if(width>=1366){
        $('#pp img:eq(0)').animate({
        'right':'0'
    },2000);

        $('#yazi').animate({
            'left':'10%'
        },2000);
    }

    if((width>=601) && (width<=1365)){
        $('#pp img:eq(1)').animate({
            'margin-top':'0'
        },1000);

        $('#yazi').animate({
            'left':'25%'
        },1000);
    }
}

当我调整大小时，我的效果无法正常工作

My effect's doesn't work normally When I Resize

css

jquery

resize