Jquery animate() opacity 工作但动画权不？

Question

嗨，我正在尝试向右制作动画，但它似乎不起作用，但不透明度更改确实在同一个 function 中起作用？

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

提前致谢

Answer 1

您的消息范围必须具有position: absolute property...

<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 元素都有一个 static position，并且不能移动。 要操作 position，请记住首先将元素的 CSS position 属性设置为相对、固定或绝对！

Answer 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>