A. Map A. Map - 2 months ago 6
Javascript Question

How to make this slide roll each time I press the button?

I managed to make it run, but only once.

jsfiddle.net/geyck9jL/

How to make this slide roll each time I press the button?

Answer

I made a little something for you.

http://jsfiddle.net/Bes7weB/ajvdx2ct/

First, you have to correctly define the possible positions.
Then, using an array, you can "cycle" the elements on each click event.

$(document).ready(function() {

  // Define the 3 possible positions
  var pos1 = {    // Same as CSS slLeft
      height: '210px',
      width: '280px',
      left: "10%",
      'margin-left':0,
      top: "8%"
    };
  var pos2 = {    // // Same as CSS slMiddle
      height: '300px',
      width: '400px',
      left: '50%',
        'margin-left':'-25%',
        top: '3%'
    };
  var pos3 = {    // // Same as CSS slRight
      height: '210px',
      width: '280px',
      left: "55%",
      'margin-left':0,
      top: "8%"
    };

  // Define an array of divs containing pictures an caption
  var divArray = [$("#slRight"),$("#slLeft"),$("#slMiddle")];

  // The click function
  $("button").click(function() {

    divArray[0].animate(pos1, "slow");
    $(divArray[0]).css('z-index', '2', "slow");

    divArray[1].animate(pos2, "slow");
    $(divArray[1]).css('z-index', '3', "slow");

    divArray[2].animate(pos3, "slow");
    $(divArray[2]).css('z-index', '1', "slow");

    // Rotate elements in divArray
    divArray = [divArray[2],divArray[0],divArray[1]];
  });
});