如何使用position：relative left：220px移动具有柔和效果的元素

Question

我有一个元素，我想从左向右移动，看起来不像“传送”。

我在按钮上使用jQuery onClick - 当它被点击时 - div“#superDiv”必须移动。

这是代码：

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

我尝试在我的#superDiv上使用CSS3 Transitions，但这并没有成功。

Answer 1

使用.animate()设置动画，marginLeft将div推向右侧。

$('#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>

---

使用CSS转换，你可以这样做而不需要任何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>