Jqueryのイベントについて質問です。
CSSがある状態になったら～するというイベントハンドラの設定の仕方はできないのでしょうか？
具体的に言いますと、「#point」が画面のスクロールに比例してmargin-leftが増えて動いているとして、「$("#point").css("margin-left") == "200px"」になったら、何かを動かす。というような事がしたいのです。
初歩的で恐縮ですが、ご教授お願いします。
パララックス的なサイトかな？
そのとおりです。スクロールをイベントにすると、断続的にイベントが発生してしまい困っています。
.scroll() の中で margin-left をチェックすればよか。
スクロールの1000px～1100pxの間で、フェードインさせて、フェードアウトするというものなので、.scroll() の中だと、連続的にイベントが発生してしまうのです。。。
スクロールの終了時にだけイベントを起動するttp://satussy.blogspot.jp/2011/11/blog-post_25.html
スクロールの終了時だけのイベント。これも興味ありです。助かります！
scrollである必要はないけど、断続的に何らかのイベントを呼び出すしか方法はないよ。
質問のようなイベントの取り方は存在しないという事でしょうか。。。う～む。
ほれ
こちらもちょっと見てみます。
ちょっと追加で質問ですが、30000pxくらいスクロールがあるなかの、例えば、5pxを通過した時に何かを出すという時、一瞬過ぎて、イベントが発生しないって事ってありえますか？
30,000pxのうちの例えば2,500px到達時に発火して、2,505pxにfalseするならそういうこともあるね。
なぬ～～2500pxをピンポイントで指定してはいけないのですか？ある程度範囲を与えて、2500～3500の時に発火としないといけないという事でしょうか？
// marginを増やしていくパターン$(window).on(’scroll’, function (event) {
var scroll = $(’body’).scrollTop();var keisuu = 2;var setMarginVal = scroll / keisuu;
$(’#point’).css(’marginLeft’, setMarginVal);
if (setMarginVal === ’200’) {bokki();}});
var bokki = function () {$(’#tinko’).animate({width: ’300%’,height: ’500%’}, 500);
$(window).off(’scroll’);};
// 通過するパターン$(window).on(’scroll’, function (event) {
var scroll = $(’body’).scrollTop();
if (scroll >= 30000) {syasei();}});
var syasei = function () {$(’#tinko’).animate({left: ’-100px’,top: ’100px’}, 500);
スクロールイベントは1pxごとに発生しないので通過した時に起こして、その後イベントをオフすればよし。あと動作確認してないので、多分どっかしら間違ってる。
’200’じゃなくて200だった。
ネーミングがステキすぎて、解読に集中できませんｗ初心者の為、まだonやoffが理解できてませんので、調べてみます。また質問させてください。
onがイベントを登録、offはイベントを停止です。
このコメ主はきっと出来る奴だ。すばらしい。
ん？途中で一度offしたら、scroll内でのそれ以下の記述は無効になります？
$(window)の’scroll’イベントがそれ以降発生しなくなる。
スクロールイベントそのものは続けたいなら
var is_bokki = false;
$(window).on(’scroll’, function (event) { // 略 if (is_bokki === false) { bokki(); }});
var bokki = function () { // 略 is_bokki = true;}
のように判定する変数を別途作って、一度しか呼ばないようにするとか。
スクロールで戻ってくる事もあるので、一度しか呼ばないのは、厳しいんです。。。
じゃあoffしないで普通にやればおｋ
#tinko の width: ’300%’,height: ’500%’ ってなんやねん。うらやましいわ。
やめて。そんなの入らないわっ
みんなの回答 6 件
パララックス的なサイトかな？
.scroll() の中で margin-left をチェックすればよか。
scrollである必要はないけど、断続的に何らかのイベントを呼び出すしか方法はないよ。
ほれ
jQueryでブラウザのスクロール値を取得してみる | BlackFlag
http://black-flag.net/jquery/20100607-1138.htmlちょっと追加で質問ですが、
30000pxくらいスクロールがあるなかの、例えば、5pxを通過した時に
何かを出すという時、
一瞬過ぎて、イベントが発生しないって事ってありえますか？
// marginを増やしていくパターン
$(window).on(’scroll’, function (event) {
var scroll = $(’body’).scrollTop();
var keisuu = 2;
var setMarginVal = scroll / keisuu;
$(’#point’).css(’marginLeft’, setMarginVal);
if (setMarginVal === ’200’) {
bokki();
}
});
var bokki = function () {
$(’#tinko’).animate({
width: ’300%’,
height: ’500%’
}, 500);
$(window).off(’scroll’);
};
// 通過するパターン
$(window).on(’scroll’, function (event) {
var scroll = $(’body’).scrollTop();
if (scroll >= 30000) {
syasei();
}
});
var syasei = function () {
$(’#tinko’).animate({
left: ’-100px’,
top: ’100px’
}, 500);
スクロールイベントは1pxごとに発生しないので通過した時に起こして、その後イベントをオフすればよし。
あと動作確認してないので、多分どっかしら間違ってる。
関連するトピックス