How to delay css animation in jQuery

You can achieve the whole effect without jQuery. Just use CSS:

button {
    margin: 50px 0 0 200px;
    transition: transform 1s ease .5s; /* delay equals .5s */
}

button:hover {
    transform: scale(1.3);
}

Here's an updated JSFiddle.

While there was a nifty CSS example provided as an alternate answer, for your specific case, I would advise against it. The reason being is that the animation - although delayed - is still initialized on hover, and because your transition involves scale, it makes the text blurry during the delay period.

Regarding the Javascript solution, once you go into the setTimeout, you lose the scope of $(this). I would declare it prior to your setTimeout and then use that declaration rather than $(this), like so...

$(document).ready(function(){
  $('button').hover(function(){
    var myButton = $(this);
    window.setTimeout(function(){
      myButton.css('transform', 'scale(1.3, 1.3)');
    },500);

  }, function(){
     myButton.css('transform', 'none');
  });
});

The easiest way to achieve want you want is to use only CSS, mainly the transition property.

It was already demonstrated by 5aledmaged in his answer

Here's a JS solution:

The reason it doesn't work is because this within the callback you pass into setTimeout is not the same as this within the callback you pass into .hover().

$('button').hover(function() {
    var outer = this;
    setTimeout(function(){
      outer === this; // false
    }, 500);
    // ...

What you can do is save a reference to the outer this and use it in the inner callback:

var $this = $(this); // save the `this` you need
window.setTimeout(function() {
  $this.css('transform', 'scale(1.3, 1.3)'); // and use it here
}, 500);

Demo:

$('button').hover(function() {
  var $self = $(this); // save the `this` you need
  window.setTimeout(function() {
    $self.css('transform', 'scale(1.3, 1.3)'); // and use it here
  }, 500);
}, function() {
  $(this).css('transform', 'none');
});

button {
  margin: 50px 0 0 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
  Check
</button>

Or use an arrow function which maintains its outer context:

window.setTimeout(() => {
  $(this).css('transform', 'scale(1.3, 1.3)'); // `this` is the same as outer `this`
}, 500);

Demo:

$('button').hover(function() {
  var $self = $(this); // save the `this` you need
  window.setTimeout(() => {
    $(this).css('transform', 'scale(1.3, 1.3)'); // `this` is the same as outer `this`
  }, 500);
}, function() {
  $(this).css('transform', 'none');
});

button {
  margin: 50px 0 0 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
  Check
</button>

The problem is the value of this. It's changing with the setTimeout. You can obtain the proper object by storing this in a variable, and then using a closure:

$(document).ready(function(){
  $('button').hover(function(){
    var trueThis = this; // <--
    window.setTimeout(function(){
      $(trueThis).css('transform', 'scale(1.3, 1.3)'); // <--
    },500);

  }, function(){
    $(this).css('transform', 'none');
  });
});