【问题标题】:jQuery Slide CSS Element Out Reducing OpacityjQuery Slide CSS Element Out 减少不透明度
【发布时间】: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;  
}

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

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

【问题讨论】:

标签: jquery css


【解决方案1】:

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

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

【讨论】:

  • 那也行不通,为什么你在边距右边有“''”而不是不透明度。它只是由于不透明而淡出,但在这样做时不会滑出。
  • 'margin-right'分隔符 - 分隔,不能用作object key。但是,这段代码对我来说很好。您可能需要查看您的 CSS 设置?
  • 你需要对 CSS 元素做些什么吗?我尝试设置 .heading1 位置:相对。但也没有工作。检查我编辑的 OP。编辑我明白为什么它没有工作,因为它没有更多的边距移动到右边
猜你喜欢
  • 2013-03-15
  • 2013-05-01
  • 2012-07-27
  • 2012-12-16
  • 2012-04-25
  • 1970-01-01
  • 1970-01-01
  • 2013-10-30
  • 2015-12-01
相关资源
最近更新 更多