Arda Zaman Arda Zaman - 5 months ago 8
CSS Question

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

I give some effect in different resolution with css media queries and jquery. İf I reload in any resoluation it's not problem. But It isn't normally while I resize the screen. I know, I haven't good english but if you try, I hope you can understand. Also I try (window).resize but that's not solve my problem. Thank you. Also the problem is in the opening section (About me).

Demo : You can try here

Code:

$(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

Try This:

$(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);
    }
}