Perform action after end of the another action

Question

I need to do some action after the line will fill line-holder. For example: when you click on circle1 and line runs to the and I need get alert.

http://jsfiddle.net/fresa150/8gNPA/

tried it:

if ($('#line').width() = 100) {
  alert('something should happen with button');
}

What I do wrong and how solve it?

Have you seen [this](http://stackoverflow.com/a/9255507/382982) answer about CSS transition callbacks? It's a more flexible, decoupled approach. — pdoherty926, Jun 03 '14 at 16:36

score 2 · Answer 1 · answered Jun 03 '14 at 16:34

2

= assignment 
== means comparison without strict type checking 
=== means comparison with strict type checking

a = b always returns true in javascript so your if condition will always run

answered Jun 03 '14 at 16:34

Manquer

7,390
8
42
69

PeterKA · Accepted Answer · 2014-06-03T16:59:09.520

Here is how to sense when css animations or transitions end, especially since .addClass() does not have a callback as does .animate():

$(document).ready(function(){
    var $line = $('#line'),
        tEvents = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';
    $('#circle1').click(function(){
        $line.css('width','101px').addClass('transition-slow');
    });

    $('#circle2').click(function(){
      $line.css('width','225px').addClass('transition-slow');
    });
    $('#circle3').click(function(){
      $line.css('width','350px').addClass('transition-slow');
    });
    $line.on( tEvents, function() {
        alert( 'done' );
    });  
});

JS FIDDLE DEMO

Reference: http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

score 0 · Answer 3 · answered Jun 03 '14 at 16:31

0

Check for == - a single = means assignment.

answered Jun 03 '14 at 16:31

Adam Jenkins

51,445
11
72
100

Or even better, `===` – ntzm Jun 03 '14 at 16:38

score 0 · Answer 4 · answered Jun 03 '14 at 16:36

0

You are already doing it right, just change the assignment "=" with comparison "==".

if ($('#line').width() == 100) {
  alert('something should happen with button');
}

answered Jun 03 '14 at 16:36

Naveen Chandra Tiwari

5,055
3
20
26

`===` would be better in this circumstance – ntzm Jun 03 '14 at 16:38

bloodyKnuckles · Answer 5 · 2014-06-03T17:18:12.810

0

Never is exactly 100. Do you mean greater than 100?

Also I'm guessing you want to check the line width each time the button is clicked. Therefore need to put it in each event handler.

$(document).ready(function(){
    $('#circle1').click(function(){
      linewidth();
      $('#line').css('width','101px').addClass('transition-slow');
    });
    $('#circle2').click(function(){
      linewidth();
      $('#line').css('width','225px').addClass('transition-slow');
    });
    $('#circle3').click(function(){
      linewidth();
      $('#line').css('width','350px').addClass('transition-slow');
    });

    function linewidth() {
        $("#line").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
            if ($('#line').width() > 100) {
              alert('something should happen with button');
            }
            $("#line").unbind();
        });
    }
});

UPDATE: Added alert delay.

edited Jun 03 '14 at 17:18

answered Jun 03 '14 at 16:40

bloodyKnuckles

11,551
3
29
37

I believe `linewidth()` will be called immediately the animation begins and the alert will therefore appear long before the animation is complete. – PeterKA Jun 03 '14 at 17:00
Ah. This might help: http://stackoverflow.com/questions/9255279/callback-when-css3-transition-finishes – bloodyKnuckles Jun 03 '14 at 17:03
Quite right. See my post above. With your permission, I can add the above reference to my post. – PeterKA Jun 03 '14 at 17:05

Perform action after end of the another action

5 Answers5