私のウェブサイトには、右にスクロールする浮かぶ雲(要素)があり、それが画面に表示されなくなったことを確認したいと思います。
どうすればいいですか?
setInterval(function(){
if(!jQuery('.sa_cloud_l').is(':visible')){
alert('not visible anymore');
}else{
c1.css('left', '+=21');
}
},100);
私のウェブサイトには、右にスクロールする浮かぶ雲(要素)があり、それが画面に表示されなくなったことを確認したいと思います。
どうすればいいですか?
setInterval(function(){
if(!jQuery('.sa_cloud_l').is(':visible')){
alert('not visible anymore');
}else{
c1.css('left', '+=21');
}
},100);
:visibleCSS表示プロパティではない要素のみを選択しますnone。メソッドを使用できますoffset()。
var width = $(window).width();
setInterval(function(){
if ( $('.sa_cloud_l').offset().left > width ) {
alert('not visible anymore');
} else {
c1.css('left', '+=21');
}
},100);
セレクターは、:visibleブラウザーのビューポート内にあることを考慮していません。
http://api.jquery.com/visible-selector/
ドキュメント内のスペースを消費する場合、要素は可視と見なされます。可視要素の幅または高さが 0 より大きい。
可視性: 非表示または不透明度: 0 の要素は、レイアウト内のスペースを消費するため、可視と見なされます。要素を非表示にするアニメーション中、要素はアニメーションの最後まで表示されていると見なされます。要素を表示するアニメーション中、要素はアニメーションの開始時に表示されていると見なされます。
jquery プラグインのビューポートを確認してください http://www.appelsiini.net/projects/viewport
if ($(window).scrollLeft() <= $(this).offset().left
&& $(this).offset().left < $(window).width()+$(window).scrollLeft()
&& $(window).scrollTop() <= $(this).offset().top
&& $(this).offset().top < $(window).height()+$(window).scrollTop()) {
// at least part of 'this' is within the window
}