javascript - Animate div from right to left and then from left to right again - Stack Overflow

admin管理员组

文章数量:1325004

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=".1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">left</button>
<button id="b2">right</button>

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./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/XqqtN/5385/

• javascript
• jquery
• html
• css
• animation

Share Improve this question Follow edited May 28, 2017 at 8:39 Black asked Nov 27, 2015 at 9:03 BlackBlack 20.4k4646 gold badges185185 silver badges296296 bronze badges 2

• My advice, is to delegate the "transition" stuff to CSS, and the click logic to JS. – Anwar Commented Nov 27, 2015 at 9:06
• Check my answer and the fiddle. – Praveen Kumar Purushothaman Commented Nov 27, 2015 at 9:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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./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./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>

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./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./jquery-1.9.1.js"></script>
<div class="animateable">
  Hi
</div>

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./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.

本文标签： javascriptAnimate div from right to left and then from left to right againStack Overflow