Question

So, I’ve got a function animateSection() that animates two elements, #awards and #twitter.

I want to make it so that if a user resizes the browser

function animateSection() {
  var $checker  = $(window).width(),
      $twitter  = $('#jstwitter'),
      $awards   = $('#awards');

  var distance = 20,
      duration = 500;

  if($checker > 1140) {
    $twitter.fadeIn(duration, function() {
      $awards.fadeIn(duration);
    });
  } 
  else {
    $(window).resize(function(){
      // here is where I run into trouble...
      if($checker > 1140) {
        $twitter.animate({left: distance}, duration);
        $awards.animate({right: distance}, duration);
      }
    });
  }
}

Answer 1

When you’re first run the function you’re storing $(window).width() in a local variable, $checker, then on resize you’re checking that variable. It’s not going to change! Try replacing:

if ($checker > 1140) {

with:

if ($(window).width() > 1140) {