0

所以我有 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();
});
})
4

1 回答 1

0

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

$(document).ready(function($){
    $(window).scroll(function(){
        if($(this).scrollTop() > 300){
            $("#YourElementID").fadeTo("slow",0);
        }
    });
});
于 2013-03-30T02:17:40.753 回答