如何使用位置移动具有柔和效果的元素：相对左侧：220px [重复]

Posted 2023-05-08

【中文标题】如何使用位置移动具有柔和效果的元素：相对左侧：220px [重复]

【英文标题】：How do I move an element with a soft effect using position:relative left:220px [duplicate]

【发布时间】：2015-02-06 04:26:47

【问题描述】：

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

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

这是代码：

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

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

【参考方案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>