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

/

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/7w8kL59v/4/

• javascript
• jquery
• css

Share Improve this question Follow edited Sep 21, 2016 at 23:33 nem035 35.5k66 gold badges9292 silver badges104104 bronze badges asked Sep 21, 2016 at 17:25 falauthyfalauthy 68111 gold badge77 silver badges1515 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.

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