0

要素がビューポートに完全に表示されている場合、このプラグインを使用してアニメーションを実行しようとしています。ライトボックス効果のようなもの。それはやや反応します...しかし、それ以上ではありません。正しいアプローチを使用しているかどうかはわかりません。何か案は？

$(window).bind("resize mousewheel scroll scrollStop", function() {
if($(".tailor .content").is(":within-viewport")) {
    $(".tailor").animate({opacity:'1.0'}, 900, 'easeInOutQuart');
}
else {
    $(".tailor").animate({opacity:'0.8'}, 900, 'easeInOutQuart');
}
});
4

2 に答える 2

4

これは、要素が完全に表示されていることを検出し、必要なことを行うために使用するものです。

// Create jQuery Method
jQuery.fn.isFullyVisible = function(){

var win = $(window);

var viewport = {
    top : win.scrollTop(),
    left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();

var elemtHeight = this.height();// Get the full height of current element
elemtHeight = Math.round(elemtHeight);// Round it to a whole number

var bounds = this.offset();// Coordinates of current element
bounds.top = bounds.top + elemtHeight;
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();

return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

}

//Usage:
$(window).on('scroll', function() {
  if( $('.tailor .content').isFullyVisible() ){
    // do something
  }
});
于 2014-09-05T16:12:24.003 に答える