How to delay css animation in jQuery

Question

How can I delay my animation in jQuery? I tried using setTimeout, but it isn't working.

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

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

https://jsfiddle.net/7w8kL59v/4/

Answer 1

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');
  });
});

Answer 2

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> 

Answer 3

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 .

Answer 4

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');
  });
});