Jquery animate() 不透明度工作但动画正确不？答案

【问题标题】：Jquery animate() opacity working but animating right does not?Jquery animate() 不透明度工作但动画正确不？
【发布时间】：2021-07-30 19:27:34
【问题描述】：

您好，我正在尝试向右设置动画，但它似乎不起作用，但不透明度更改确实在同一功能中起作用？

$(document).on("click touchstart tap", ".buttonchat", function () {
   
$('.message').each(function(i) {
   delay =(i)*500;
   
     $(this).delay(delay).animate({
    opacity: 0,
   right: "-150px"

  },1000, function() {
    // Animation complete.
  });
   
   
 });
 });

正如您在这支笔中看到的那样，向右动画只会改变不透明度，这是怎么回事？笔：https://codepen.io/uiunicorn/pen/YzZXwJp

提前致谢

【问题讨论】：

标签： javascript jquery css jquery-animate

【解决方案1】：

您的消息跨度必须具有position: absolute 属性...

<span class="message" style="width: 18.2105rem; height: 1.26316rem; opacity: 1; position:absolute;">Hello! ? I hope you're having a good night</span>

这是一支工作笔：https://codepen.io/paulmartin91/pen/RwpPaPL

这是W3 Schools的解释：

默认情况下，所有 HTML 元素都有一个静态位置，并且不能感动。要操纵位置，记得先设置CSS 将元素的位置属性设置为相对、固定或绝对！

【讨论】：

或position: relative，这取决于您要实现的其他目标

【解决方案2】：

您应该考虑在 CSS 文件中添加“.”在一开始的时候。和 Js 文件在下面进行更正。

 $(document).on("click touchstart tap", ".buttonchat", function () {
   
   
   
   $('.message').each(function(i) {
   delay =(i)*500;
   
     $(this).delay(delay).animate({
    "opacity": 0.20 ,
   "right": "0px" , "top": "0px" ,  "background-color" : "green"  

  },1000, function() {
    // Animation complete.
 
  });
   
   
 });
 });

.message{
  left: 0px;
position : absolute ; 
  }
  
.relative{ position : relative ;   }

<button style="width: 200px; height: 100px" class="buttonchat"></button>

<div class="message-main relative">
  <div class="message-hold">
    <div class="messages">
      <div
        class="bubble cornered left"
        style="
          opacity: 1;
          width: 19.2105rem;
          height: 2.47368rem;
          margin-top: 0px;
          margin-left: 0px;
          transform: scale(1);
        "
      >
        <div class="loading" style="transform: translateX(0rem) scale(1)"
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b></div
        ><div
          class="message"
          style="width: 18.2105rem; height: 1.26316rem; opacity: 1"
          >Hello! ? I hope you're having a good night</div
        >
      </div>
      <br />
      <div
        class="bubble cornered left"
        style="
          opacity: 1;
          width: 15.7368rem;
          height: 2.47368rem;
          margin-top: 0px;
          margin-left: 0px;
          transform: scale(1);
        "
      >
        <div class="loading" style="transform: translateX(0rem) scale(1)"
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b></div
        ><div
          class="message"
          style="width: 14.7368rem; height: 1.26316rem; opacity: 1"
          >I'm a junior interactive designer ?</div
        >
      </div>
      <br />
      <div
        class="bubble cornered left"
        style="
          opacity: 1;
          width: 23.8947rem;
          height: 2.47368rem;
          margin-top: 0px;
          margin-left: 0px;
          transform: scale(1);
        "
      >
        <div class="loading" style="transform: translateX(0rem) scale(1)"
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b></div
        >
        <div
          class="message"
          style="width: 22.8421rem; height: 1.26316rem; opacity: 1"
        >
          which basically means I create cool looking websites ?
        </div>
      </div>
      <br />
      <div
        class="bubble cornered left"
        style="
          opacity: 1;
          width: 30.9474rem;
          height: 2.47368rem;
          margin-top: 0px;
          margin-left: 0px;
          transform: scale(1);
        "
      >
        <div class="loading" style="transform: translateX(0rem) scale(1)"
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b></div
        ><div
          class="message"
          style="width: 29.9474rem; height: 1.26316rem; opacity: 1"
          >I have exactly 0 qualifications and mostly get by using stackoverflow
          ?</div
        >
      </div>
      <br />
      <div
        class="bubble cornered left"
        style="
          opacity: 1;
          width: 20.3158rem;
          height: 2.47368rem;
          margin-top: 0px;
          margin-left: 0px;
          transform: scale(1);
        "
      >
        <div class="loading" style="transform: translateX(0rem) scale(1)"
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b></div
        ><div
          class="message"
          style="width: 19.3158rem; height: 1.26316rem; opacity: 1"
          >Now I have your full confidence let's move on!</div
        >
      </div>
      <br />
    </div>
  </div>
</div>

【讨论】：