jQuery Slide CSS Element Out 减少不透明度

Posted 2023-05-08

【中文标题】jQuery Slide CSS Element Out 减少不透明度

【英文标题】：jQuery Slide CSS Element Out Reducing Opacity

【发布时间】：2013-05-13 13:32:34

【问题描述】：

您好，我正在尝试滑出一个 CSS 元素，逐渐消除不透明度，直到它完全消失。

例如，我想将文本向右滑动，以减少不透明度，直到它完全消失。

//JQuery
$(document).ready(function() 
    $('.heading1').animate(marginRight:"20px",opacity:0,500)
)
//html
<div class="sliderContainer">

<a class="heading1">Text</a>

</div>

//CSS
.heading1 
    position:relative;  

我已经尝试过了，但它并没有真正滑出，就像在屏幕上移动一样。它只是淡出。有什么想法吗？

我希望能够在屏幕内外设置动画以减少不透明度。

【问题讨论】：

这样的？ jsfiddle.net/LXsBm

***.com/questions/1652576/… 在这里解决了

【参考方案1】：

使用整数 (20) 代替字符串 (20px)：

$(document).ready(function() 
      $('.heading1').animate('margin-right':20,opacity:0,500);
)

【讨论】：

那也行不通，为什么你在边距右边有“''”而不是不透明度。它只是由于不透明而淡出，但在这样做时不会滑出。

'margin-right' 用 分隔符 - 分隔，不能用作object key。但是，这段代码对我来说很好。您可能需要查看您的 CSS 设置？

你需要对 CSS 元素做些什么吗？我尝试设置 .heading1 位置：相对。但也没有工作。检查我编辑的 OP。编辑我明白为什么它没有工作，因为它没有更多的边距移动到右边