如何使用位置:相对左侧:220px 移动具有柔和效果的元素

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

本文关键字：元素 移动 位置 何使用 相对 220px      更新时间：2023-09-26

我有一个元素，我想从左到右移动，看起来不像是"传送"。

我正在使用jQuery单击一个按钮 - 当它被点击时 -div"#superDiv"必须移动。

这是代码： 

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

我尝试在我的 #superDiv 上使用CSS3过渡，但没有成功。

使用 .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>

相关文章：