Question

所以我有5个div，我让他们从侧面，底部或顶部移动，取决于哪一个。出于某种原因，我试图修改脚本，以便案例1和案例2从右侧进入。案件3从左侧进入。我从左边进来的是0，从右边进来的是5。但是，一旦我使用了案例3,1和2的设置，它们就会静止不动，只有顶部/底部动画。

我该如何解决这个问题？

我还想在那里添加不透明度，我不知道如何去做。我希望它为0并淡化为1。

jQuery(document).ready(function () {
var myHeight;
jQuery('.type-portfolio').each(function (i) {
    var myElement = jQuery(this);
    myElement.data('params', {
        top1: jQuery(this).css('top'),
        x1: jQuery(this).css('left')
    });
    switch (i) {
    case 0:
        myElement.data('params', {
            top0: -600,
            x0: -2600,
            top1: jQuery(this).css('top'),
            x1: jQuery(this).css('left')
        });
        break;
    case 1:
        myElement.data('params', {
            top0: -200,
            x0: -930,
            top1: jQuery(this).css('top'),
            x1: jQuery(this).css('left')
        });
        break;
    case 2:
        myElement.data('params', {
            top0: -200,
            x0: -1030,
            top1: jQuery(this).css('top'),
            x1: jQuery(this).css('left')
        });
        break;
    case 3:
        myElement.data('params', {
            top0: 250,
            x0: -2600,
            top1: jQuery(this).css('top'),
            x1: jQuery(this).css('left')
        });
        break;
    case 4:
        myElement.data('params', {
            top0: 250,
            x0: -530,
            top1: jQuery(this).css('top'),
            x1: jQuery(this).css('right')
        });
        break;
    }
});

function init() {
    myHeight = jQuery(window).height();
    jQuery('.topWrap').css('height', myHeight - 300);
    jQuery('.portfolioWrapper').css('min-height', Math.max(myHeight / 2 + 250, 600));
}
jQuery(window).scroll(function () {
    var s_max = myHeight / 2 + 250;

    function move(p0, p1, s) {
        return Math.min((-p0 + p1) / s_max * s + p0, p1);
    }
    var scrollTop = parseInt(jQuery(window).scrollTop());
    jQuery('.type-portfolio').each(function (i) {
        var myX = move(jQuery(this).data('params').x0, parseInt(jQuery(this).data('params').x1), scrollTop),
            myY = move(jQuery(this).data('params').top0, parseInt(jQuery(this).data('params').top1), scrollTop);
        if (i < 3) {
            jQuery(this).stop().css({
                left: myX + 'px',
                top: myY + 'px'
            })
        } else {
            jQuery(this).stop().css({
                right: myX + 'px',
                top: myY + 'px'
            })
        }
    })
})
init();
jQuery(window).resize(function () {
    init();
});
})

Answer 1

不确定左/右问题，但要在滚动时淡化元素：

$(document).ready(function($){
    $(window).scroll(function(){
        if($(this).scrollTop() > 300){
            $("#YourElementID").fadeTo("slow",0);
        }
    });
});

Div来错了 - 滚动动画

1 个答案: