如何以正确的顺序隐藏项目？ , 使用航点, TweenMax, jquery

Question

当我滚动浏览器 window 时，我正在折叠 header，我正在使用 waypoints 在超过某个限制时触发一个函数。

我的问题是如何做到这一点，例如，当我向下滚动时首先消失内容（表单输入）然后更改 header 的高度，然后当我向上滚动时首先增加高度和然后显示内容（表单输入）。

你会怎么做？

我这里有一个例子：fiddle

JS:

$(document).ready(init);

function init(){

    var header, pageContainer, pageContent, brandImage;

    header = $('header');
    pageContainer = $('#page-container');
    pageContent = $('#page-content');
    brandImage = $('.brand img');

    //functions
    collapseHaeder();


    function collapseHaeder(){
        if(pageContainer.hasClass('collapse-header')){
            var waypoint = new Waypoint({
                element: document.getElementById('page-content'),
                handler: function(direction) {

                    var elementsToResize = $('header, .brand-holder, .header-content');
                    var hideElms = $('.hide-element');

                    if(direction == 'up'){
                        hideElements(hideElms);
                        resizeHeader(elementsToResize);
                    }else {
                        resizeHeader(elementsToResize);
                        hideElements(hideElms);
                    }
                }
            });

        }
    }


    function resizeHeader(elemts){
        var newHeight = 45;
        var brandHeight = newHeight - 10;
        var easingEffect = 'Quart.easeInOut';

        if(!elemts.hasClass('resized')){
            elemts.addClass('resized');

        }else {
            elemts.removeClass('resized');
            newHeight = 140;
            brandHeight = newHeight / 2;
        }
        //header elements  containers
        TweenMax.to(elemts, 1, {height:newHeight, ease: easingEffect});
        //page container padding
        TweenMax.to(pageContainer, 1, {paddingTop:newHeight, ease: easingEffect});
        //brand image
        TweenMax.to(brandImage, 1, {height:brandHeight, ease: easingEffect});
    }

    function hideElements(hiddenElement){
        var classHidded = 'has-hided';
        if(!hiddenElement.hasClass(classHidded)){
            hiddenElement.addClass(classHidded);
            hiddenElement.fadeOut(800);
        }else {
            hiddenElement.fadeIn(500);
            hiddenElement.removeClass(classHidded);
        }
    }


}

Answer 1

如果您已经在使用 GSAP，则无需使用 jQuery 的 fadeIn 和 fadeOut。看看我创建的这个jsFiddle，代码如下：

/*global TweenMax,TimelineMax*/
$(document).ready(init);

function init() {
    var header, pageContainer, pageContent, brandImage, brandHolder, headerContent, hideElement;
    var duration = .8,
        ease = 'Power4.easeInOut',
        stagger = duration * .2;
    var minHeight = 45;
    var brandHeight = minHeight - 10;
    var classNameResized = 'resized';
    var classNameHidden = 'has-hided';
    var fadeTween = null,
        heightTween = null,
        paddingTween = null,
        imageTween = null;
    header = $('header');
    pageContainer = $('#page-container');
    pageContent = $('#page-content');
    brandImage = $('.brand img');
    brandHolder = $('.brand-holder');
    headerContent = $('.header-content');
    hideElement = $('.hide-element');
    //functions
    initTweens();
    collapseHaeder();

    function initTweens() {
        fadeTween = TweenMax.to(hideElement, duration, {
            autoAlpha: 0,
            display: 'none',
            ease: ease,
            paused: true
        });
        heightTween = TweenMax.to([header, brandHolder, headerContent], duration, {
            height: minHeight,
            ease: ease,
            paused: true,
            delay: stagger
        });
        paddingTween = TweenMax.to(pageContainer, duration, {
            paddingTop: minHeight,
            ease: ease,
            paused: true,
            delay: stagger
        });
        imageTween = TweenMax.to(brandImage, duration, {
            height: brandHeight,
            ease: ease,
            paused: true,
            delay: stagger
        });
    }

    function addClasses() {
        if (!header.hasClass(classNameResized)) {
            header.addClass(classNameResized);
            brandHolder.addClass(classNameResized);
            headerContent.addClass(classNameResized);
        }
        if (!hideElement.hasClass(classNameHidden)) {
            hideElement.addClass(classNameHidden);
        }
    }

    function removeClasses() {
        if (header.hasClass(classNameResized)) {
            header.removeClass(classNameResized);
            brandHolder.removeClass(classNameResized);
            headerContent.removeClass(classNameResized);
        }
        if (hideElement.hasClass(classNameHidden)) {
            hideElement.removeClass(classNameHidden);
        }
    }

    function collapseHaeder() {
        if (pageContainer.hasClass('collapse-header')) {
            var waypoint = new Waypoint({
                element: pageContent,
                handler: function (direction) {
                    if (direction == 'up') {
                        fadeTween.reverse();
                        heightTween.reverse();
                        paddingTween.reverse();
                        imageTween.reverse();
                        removeClasses();
                    } else {
                        fadeTween.play();
                        heightTween.play();
                        paddingTween.play();
                        imageTween.play();
                        addClasses();
                    }
                }
            });
        }
    }
}

在代码结构、动画风格等方面，这里有很多地方可以改进，例如动画 translateY 而不是 height 以获得更流畅的动画（Link & Link），但我试图保持代码的结构/方法不变。

希望对您有所帮助。

P.S。我强烈建议使用 TimelineMax.

查看 TimelineMax as well for all your sequencing needs in animations. I have also forked another version

T

如何以正确的顺序隐藏项目？ , 使用航点, TweenMax, jquery

How to hide items in the correct sequence? , Using waypoint, TweenMax, jquery

javascript

jquery

gsap