How do I move an element with a soft effect using position:relative left:220px

Question

I have an element which I want to move from left to right that won't look like it "teleported".

I am using jQuery onClick on a button - when it's clicked - the div "#superDiv" has to move.

this is the code:

$('#mob-home-btn').click(function(){
    $("#superDiv").css({left: 227, position: 'relative'});
})

I tried using CSS3 Transitions on my #superDiv which didn't make the trick.

Answer 1

Use .animate() to animate and marginLeft to push the div to its right.

$('#mob-home-btn').click(function() {
  $("#superDiv").animate({
    marginLeft: '227'
  });
})

#mob-home-btn {
  width: 70px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background-color: magenta;
}
#superDiv {
  width: 100px;
  height: 100px;
  background-color: coral;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mob-home-btn">Click Me</div>
<div id="superDiv"></div>

---

Using CSS transitions, you can do it this way without any jQuery.

#mob-home-btn {
    width: 110px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background-color: magenta;
    
}
#superDiv {
    width: 100px;
    height: 100px;
    background-color: coral;
    transition: margin-left 1s;
}
#mob-home-btn:hover + #superDiv {
    margin-left: 227px;
}

<div id="mob-home-btn">Hover Over Me</div>
<div id="superDiv"></div>