0

SO 私は 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 に答える