Jquery animate() 不透明度有效但动画不正确?
Jquery animate() opacity working but animating right does not?
您好,我正在尝试向右移动动画,但它似乎不起作用,但不透明度更改确实在同一功能中起作用?
$(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
提前致谢
您的消息跨度必须 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的解释:
By default, all HTML elements have a static position, and cannot be
moved. To manipulate the position, remember to first set the CSS
position property of the element to relative, fixed, or absolute!
在 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 Whosebug
</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>
您好,我正在尝试向右移动动画,但它似乎不起作用,但不透明度更改确实在同一功能中起作用?
$(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
提前致谢
您的消息跨度必须 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的解释:
By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!
在 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 Whosebug
</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>