CODEWITHSUNDEEP
javascriptjquery
Allison Gandara
Allison Gandara

Reputation: 51

Trouble animating sprite

I have a sprite (div=slider) that includes 4 photos. I need to animate it using JavaScript so that when clicking on the arrow buttons (div=leftArrow, rightArrow), it creates a slideshow of the 4 photos to move to the left and right. I have tried several different ways, but cannot get it to animate.

Here is what I currently have. Any advice appreciated...

$("#leftArrow").onclick(function() {
  ("#slider").animate({
    left: "200px"
  });
});
$("#rightArrow").onclick(function() {
  ("#slider").animate({
    right: "200px"
  });
});
h1 {
  color: #0000ff;
  /*blue*/
  font-size: 44px;
}

.container {
  max-height: 520px;
  background-color: #808080;
  /*grey*/
}

#leftArrow,
#rightArrow {
  display: inline-block;
  width: 38px;
  height: 50px;
}

#leftArrow {
  position: relative;
  /*top: 0;*/
  top: 235px;
  left: 2%;
  width: 5%;
  height: 50px;
  background: url('../images/left_arrow.png') 0 0 no-repeat;
  z-index: 10;
}

#rightArrow {
  position: relative;
  /*top: 0;*/
  top: 235px;
  left: 87.5%;
  width: 5%;
  height: 50px;
  background: url('../images/right_arrow.png') bottom right no-repeat;
  z-index: 10;
}

#slider {
  position: relative;
  height: 520px;
  max-width: 792px;
  margin: 0 auto;
  /*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
  background-image: url('../images/Animate-Sprite_520a.png');
  background-repeat: no-repeat;
}

#startApp {
  width: 235px;
  margin: 0 auto;
}

#startApp ul {
  list-style-type: none;
}

#startApp ul li a {
  display: inline-block;
  text-decoration: none;
  width: 150px;
  text-align: center;
  background-color: steelblue;
  border: 2px solid #808080;
  color: white;
  font-size: 32px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Fox Valley Runner Club</h1>


<div class="container">

  <div id="slider">

    <button id="leftArrow" onclick="move('left');" class="fbtnFirst" /button>



    <button id="rightArrow" onclick="move('right');" class="fbtnLast"/button>
    </div>

    </div>
    <div id="startApp">
            <ul>
                <li><a href="runners.html">Start here!</a></li>
            </ul>
    </div>

Upvotes: 1

Views: 68

Answers (1)

vinay yadav
vinay yadav

Reputation: 106

You can animate the sprite by change the backgroundPostionX and backgroundPostionY values from JS.

In your JS you have also defined a event handler on the button itself and calling move method but that is not defined.

<div id="slider">
  <button id="leftArrow" onclick="move('left');" class="fbtnFirst"/button>
  <button id="rightArrow" onclick="move('right');" class="fbtnLast"/button>
</div>

<script>
// assuming the width of one portion of the sprite is 200px, this value will vary according to your size of the image
  $("#leftArrow").onclick(function(){
    $("#slider").css("backgroundPostionX","200px"); 
    $("#rightArrow").onclick(function(){
      ("#slider").css("backgroundPostionX","-200px");
    });
  });
</script>

Hope this helps

Upvotes: 2

Related Questions