当div开始时淡入元素

我不完全知道如何命名它，我想知道如何让函数淡入或什么时候，div包装开始显示。为了更清楚我想这样的事情link 当div开始时淡入元素

正如你可以看到当你向下滚动时，元素向上滑动。所以我试过offsetdiv，当一个被通过后，然后功能触发器，但它没有响应选项，在不同的分辨率，它不会在同一时间触发。

如果你看我提供的链接，无论我的解析度是否一样。

所以我的问题是：

我在做与css一些错误，因此不会与offset触发呢？
（我认为scrollTop和像素在这里不好，因为没有响应选项）有其他/更好的方法做到这一点比offset？
也许而不是传递和元素是否有一种方法来触发'div'开始后的功能？

感谢您的帮助！

编辑：这是简单的fiddle它是如何工作的。当你在特定div上时，它就会显示出来。然而，当你改变你的分辨率，或者只是最小化浏览器，图像已经显示，当你看到红色背景

来源

2014-02-14 Mateusz Winnicki

有你，尽管关于使用库到手这就像恒星等http://markdalgleish.com/projects/stellar.js/ –

不，我还没有，首选自制选项xD –

1.'开始'，你的意思是当div进入视野时，对吧？你能否向我们展示一些我们可以使用的代码？小提琴也会很好。 –

这将是很容易做到这一点与jQuery .animate()功能。你只需要动画opacity和top属性。

考虑下面的CSS：

.test { 
    background: red; 
    height: 300px; 
    width: 200px; 
    padding: 10px; 
    font-family: Arial; 
    font-size: 50px; 
    text-align: center; 
    color: white; 
    position: absolute; 
    top: 100px; 
    opacity: 0; 
    border-bottom: 10px solid darkred; 
}

这个HTML：

<div class="test"> 
    <strong>Hello World!</strong> 
</div>

然后，你可以这样做：

$(".test").animate({ 
    top: 10, 
    opacity: 1 
}, 1000);

JSFIDDLE

来源

2014-02-14 10:53:43

嘿，是啊，我知道如何动画，但我的问题是如何正确触发它，当div进入视野。 –

@MateuszWinnicki使用'$（window）.scroll（function（）{...}）'。 http://jsfiddle.net/32L2f/1/ –

嗯我编辑我的帖子，与小提琴我怎么这样做。但我想这就是我所需要的，如果我理解的很好 - 它显示元素在视图中的权利？它可以用更少的线条，或最佳的:)？ –

当div开始时淡入元素

回答

相关问题