Элемент затухания, когда начинается div

Question

Я точно не знаю, как его назвать, я хотел бы знать, как я могу сделать функцию fadeIn или что-то еще, когда обертка div начинает показывать. Чтобы быть более ясным, я думаю о чем-то подобном link

Как вы можете видеть, когда вы прокручиваете вниз, элементы скользят вверх. Итак, я пробовал с offset определенного div, после того как один из них отключен, тогда триггеры функции, но его не реагирующая опция, на разных разрешениях не запускается одновременно.

Если вы посмотрите ссылку, которую я предоставил, будь то разрешение, у меня это работает одинаково.

Так что мои вопросы:

1. я делаю что-то неправильно с css, так что это не очень хорошо запускать с offset?
2. (я думаю, scrollTop и пиксели здесь не очень хорошие, потому что для этого не подходит вариант) есть другой/лучший способ сделать это, чем offset?
3. Возможно, вместо передачи и элемента есть способ запуска функции после запуска «div»?

Спасибо за помощь!

Отредактировано: это просто fiddle о том, как это работает. Когда вы находитесь на вершине определенного div, он показывает. Однако, когда вы меняете свое разрешение или просто сворачиваете браузер, изображение уже отображается, когда вы видите красный фон.

Answer 1

Было бы очень легко сделать это с помощью функции 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