Как получить эффект затухания и скольжения? - PullRequest
Новая
       37

Как получить эффект затухания и скольжения?

5 голосов
/ 21 октября 2011

Мне интересно, как я могу создать эффект затухания и скольжения, например: http://www.apple.com/stevejobs/

Это действительно классная анимация, и мне интересно, возможно ли это с jQuery?

Примечание: я уже знаю, как постепенно исчезать. Я использую JQuery все время. Я хочу эффект, когда новые комментарии / воспоминания / мысли выпадают. Он скользит вниз и одновременно исчезает.

Ответы [ 4 ]

2 голосов
/ 21 октября 2011

Рабочий пример

По сути, вы должны установить элемент "почти невидимым" с opacity из 0.001, чтобы заставить слайд работатьа затем используйте fadeTo, чтобы вернуть его в 1, который полностью виден. 

$(function() {

    $('#button').click(function() {
        // new element to be added to top of list hidden
        var $new_li = $('<li style="display:none;">New Item</li>');

        // make element "almost" invisible
        $new_li.css('opacity', '0.001');

        // add it to list
        $('.list').prepend($new_li);

        // slide the "almost" invisible element down 
        // (shifting all others down)
        $new_li.slideDown('slow', function() {

            //once done sliding, trigger fade
            $new_li.fadeTo('slow',1);
        });
    });
});
2 голосов
/ 21 октября 2011

Затухание - это просто CSS, который они применили к элементу:

из messages.css (строка 81) 

#messages #messageContainer #mask {
    background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 15%, #FFFFFF 92%, #FFFFFF 100%) repeat scroll 0 0 transparent;
    bottom: 0;
    height: 200px;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 1;
}

и для эффекта прокрутки это можно легко сделать с помощью jQuery.

edit: элементы не исчезают, они идут за элементом, который представляет собой градиент от прозрачного к белому

1 голос
/ 21 октября 2011

Вы можете использовать эффект затухания jQuery 

$(selector).fadeIn('slow', function() {})

http://api.jquery.com/fadeIn/

jsFiddle: http://jsfiddle.net/ckTRh/

1 голос
/ 21 октября 2011

Зависит от того, какую часть вы хотите! JQuery может сделать все это, некоторые сложнее, чем другие. Взгляните на методы fadeIn и fadeOut . Комментарии, падающие вниз по уровню, можно сделать с помощью метода animate.

Отредактировано на основе вашего комментария к другому ответу:

Вы можете взять все элементы, которые хотите переместить вниз, и использовать для них метод animate. Сделайте следующее:

  1. Расположите все предметы так, чтобы первый из них был скрыт
  2. Удаляет все элементы, кроме первого $ (". Селектор: не (: первый)")
  3. Сдвиньте все элементы вниз во время появления метода animate (), затемнение будет игнорироваться для всех видимых элементов.
  4. Загрузите следующий элемент, где был первый, повторите.
...