<h1>jQuery animation test</h1>
<p>Please take a look by iOS(iPhone).</p>

<h2>right : 0</h2>
<div class="wrap">
<a id="test1"></a>
</div>  
<h2>right : 0 <span>%</span></h2>
<div class="wrap">
<a id="test2"></a>
</div>
h2 span {
  color: #f00;
}

.wrap{
  position: relative;
  height: 40px;
  display:block;
}

#test1,#test2{
  position: absolute;
  top: 0;
  right: 0;
  height: 40px;
  width: 40px;
  background-color: #000;
  display: inline-block;
  z-index:2;
}
View Compiled
var flag1 = false;
$("#test1").on('click',function(){
  if(flag1 === false){
    $(this).animate({'right':'82%'});
    flag1 = true;
  }else{
    $(this).animate({'right':'0'});
    flag1 = false;
  }
  return false;
});

var flag2 = false;
$("#test2").on('click',function(){
  if(flag2 === false){
    $(this).animate({'right':'82%'});
    flag2 = true;
  }else{
    $(this).animate({'right':'0%'});
    flag2 = false;
  }
  return false;
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js