How to change the speed of sprite with slider using jquery or javascript

Question

My requirement has following steps:

There will be a step slider which have three control steps (Slow, Normal and Fast).
Slow: ½ X speed.
Normal: X speed.
Fast: 2X speed.
Using these controls user can change the speed of an animation.
Default speed will be Normal.

Can You help me in this problem?

score 0 · Answer 1 · answered Jan 11 '17 at 11:08

I got my solution here is the code.

here is js file

$( function() {
    $( "#slider-range-max" ).slider({
      min:0.75,
     max:3,
     value:1.5,
     slide:function(event,ui){
         console.log(ui.value);
         if(ui.value=="0.75"){
             console.log("min");
             slow();

         }else if(ui.value=="2.75"){
             console.log("max");
             fast();
         }else{
             console.log("nor");
             normal();
         }
    }
    });
    function slow(dur) {
                document.getElementById("adam").style.animation="walk-east 3s steps(8) infinite";
            }
    function fast(dur) {
        document.getElementById("adam").style.animation="walk-east 0.75s steps(8) infinite";
    }
    function normal() {
        document.getElementById("adam").style.animation="walk-east 1.5s steps(8) infinite";
    }
    normal();
  });

here is html file

<html>
    <head>
        <title>Motion Filter</title>
          <link href="css/style.css" rel="stylesheet" />
          <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
          <link rel="stylesheet" href="/resources/demos/style.css">
          <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
          <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>-->        
    </head>
    <body>        
        <div id="animation-containter">
            <div id="adam"></div>
        </div>
        <div id="slider-range-max"></div>
    </body>
     <script src="js/comp.js" type="text/javascript"></script>
</html>

Here is css

.ui-slider-horizontal {
    height: .8em;
    width: 22em;
    margin: 10px;
}
#animation-containter{
    margin: 10px;
    height: 120px;
    background: pink;
    width: 800px;
    border: 2px solid brown;
    padding: 5px;
}
#adam{
    background: url("../assets/images/man.png");
    height: 105px;
    width: 56px;
/*    animation: walk-east 2.0s steps(8) infinite;*/
}
@keyframes walk-east{
    from{ background-position: 0px; }
    to{ background-position: -488px; }
}

How to change the speed of sprite with slider using jquery or javascript

1 Answers1