最新消息:Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)

javascript - How to delay css animation in jQuery - Stack Overflow

matteradmin5PV0评论

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/

Share Improve this question edited Sep 21, 2016 at 23:33 nem035 35.5k6 gold badges92 silver badges104 bronze badges asked Sep 21, 2016 at 17:25 falauthyfalauthy 6811 gold badge7 silver badges15 bronze badges
Add a ment  | 

4 Answers 4

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

comment list (0)

  1. No comments so far