CODEWITHSUNDEEP
javascriptjquery
SamC
SamC

Reputation: 115

Understanding The Logic Behind A jQuery Event

I couldn't find any such question in StackOverFlow (please forgive me if I missed any!).

The code below is messing me up. Please note that this is to resume/pause animation.

$(function() {
    $('.slider').css("animation-play-state", "running");
    var animVar = $('.slider').css("animation-play-state"); //animVar === "running" and on next click, it gets updated to "paused"
    $('.slider').click(function() {
            $(this).css("animation-play-state", function() {
                if (animVar === "running") {
                    return "paused"; //returns "paused" to the function and the css property gets updated, overriding the one at the first line, changing the animVar on the next line.
                    } else {
                    return "running"; //returns "running" to the function and the css property gets updated, overriding the one at the first line, changing the animVar on the next line.
                }   
            }); 
    }); 
});

The thing is, if I don't update the animVar inside the if/else statements, the code is not working. What's happening instead is, once I click on it, it pauses and on successive clicks, it doesn't resume.

But if I do update animVar inside the if/else statements like animVar = "running"/"paused", it works fine.

My question is, at first I am setting the animation play state to 'running'.

That sets animVar to 'running'.

The if condition is met and the animation is 'paused' as expected.

But this should also override the $('.slider').css("animation-play-state", "running"); at the top and reset the animVar to 'paused', so that on next click, the if condition is not met and the else statement is carried out, thus toggling the play state between running and paused on clicks.

Apparently, my logic is going wrong somewhere. Can someone please make me understand? I mean, the inside function is a closure, so it should be able to access and update the variables of the outer function, right?

Here's another thing. If on each click, the browser is reading it from the top and thus, resetting the play state to "running" each time, how would the updating of animVar inside if/else work? It's getting overridden each time the browser reads the whole function afresh.

Please help me.

Upvotes: 0

Views: 72

Answers (1)

berend
berend

Reputation: 553

If I understand it correctly you are trying to toggle between "running" and "paused" as value of the animation-play-state property?

See below.

$(function() {
  $(".slider").click(function() {
    var sliderClass = $(".slider").css("animation-play-state");
    if(sliderClass == "running") {
      $('.slider').css("animation-play-state", "paused");
      console.log("running");
    } else {
      $(".slider").css("animation-play-state", "running");
      console.log("paused");
    }
  })
});
.slider {
animation-play-state: running; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider"> hallo </div>

Upvotes: 3

Related Questions