CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Black
Black

Reputation: 20362

Animate div from right to left and then from left to right again

I try to animate a div from its original position to left of the screen, if a button was clicked. If another button is clicked then i want it to animate back to it's origin position. I was able to figure out on how to animate it from right to left, but i cant animate it back to its original position.

var left = $('#coolDiv').offset().left;

$("#b1").click(
  function() {
    $("#coolDiv").css({
      left: left
    }).animate({
      "left": "0px"
    }, "slow");
  }
);

$("#b2").click(
  function() {
    $("#coolDiv").css({
      right: right
    }).animate({
      "right": "0px"
    }, "slow");
  }
);
#coolDiv {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  background: yellow;
}
#b1 {
  margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">left</button>
<button id="b2">right</button>

http://jsfiddle.net/XqqtN/5385/

Upvotes: 4

Views: 8029

Answers (3)

Tushar
Tushar

Reputation: 87233

Set the left CSS to the window width minus the width of the box.

$("#b1").click(function() {
  // Get the current left of the div
  var left = $('#coolDiv').offset().left;

  $("#coolDiv").css({
    left: left
  }).animate({
    left: 0
  }, "slow");
});

$("#b2").click(function() {
  var left = $(window).width() - $('#coolDiv').width();

  $("#coolDiv").css({
    left: 0
  }).animate({
    left: left
  }, "slow");
});
#coolDiv {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  background: yellow;
}
#b1 {
  margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">Left</button>
<button id="b2">Right</button>

Optimized Code:

// Common function to animate Div on both button clicks
function animateDiv(left, right) {
  $('#coolDiv').css({
    left: left
  }).stop(true, true).animate({
    left: right
  }, 'slow');
}

$('#b1').click(function() {
  animateDiv($('#coolDiv').offset().left, 0);
});

$('#b2').click(function() {
  animateDiv(0, $(window).width() - $('#coolDiv').width());
});
#coolDiv {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  background: yellow;
}
#b1 {
  margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">Left</button>
<button id="b2">Right</button>

Upvotes: 3

ketan
ketan

Reputation: 19341

This is your updated code. Make changes like following:

$("#b1").click(
  function() {
    $("#coolDiv").animate({
        "left": "0px"
      },
      "slow"
    );
    $("#coolDiv").css('right', '');
  }
);

$("#b2").click(
  function() {

    $("#coolDiv").animate({
        "right": "0px"
      },
      "slow"
    );
    $("#coolDiv").css('left', '');
  }
);
#coolDiv {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  background: yellow;
}
#b1 {
  margin-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">B1</button>
<button id="b2">B2</button>

Hope it helps.

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

Can you try something simple like this?

$(function () {
  $(".animateable").animate({
    left: $(window).innerWidth() - 50
  }, 1000, function () {
    $(".animateable").animate({
      left: 0
    }, 1000);
  });
});
* {font-family: Segoe UI; line-height: 1;}
.animateable {position: absolute; width: 50px; text-align: center; background-color: #ccf; line-height: 2em;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="animateable">
  Hi
</div>

You can use setInterval to make it work a lot of times.

$(function () {
  setInterval(function () {
    $(".animateable").animate({
      left: $(window).innerWidth() - 50
    }, 1000, function () {
      $(".animateable").animate({
        left: 0
      }, 1000);
    });
  }, 2000);
});
* {font-family: Segoe UI; line-height: 1;}
.animateable {position: absolute; width: 50px; text-align: center; background-color: #ccf; line-height: 2em;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="animateable">
  Hi
</div>

Upvotes: 2

Related Questions