2

scrollTop > 200の場合に表示され、scrollTop < 200の場合に非表示になるボタンを作成しようとしています。ただし、ボタンをフェードインしたいのですが、問題が発生します。

ここに私のJavaScriptがあります：

$(window).scroll(function(){
  if($(this).scrollTop() > 200) {
    $(".button").removeClass("opacity");
  }
  else {
    $(".button").addClass("opacity");
  };

そしてCSS：

.opacity { opacity:0; }

このようなコードでは、表示/非表示機能は正常に機能しますが、フェードインすることはできません。また、jscriptをこれに変更してみました：

$(window).scroll(function(){
  if($(this).scrollTop() > 200) {
    $(".button").animate({"opacity":"1"}, 1500);
  else {
    $(".button").animate({"opacity":"0"}, 1500);
  };

しかし、これではまったく機能しません。

私が最後に試したのはfadeInとfadeOutプロパティでしたが、このボタンの下にある他のボタンは、表示/非表示後に位置を変更し（ボタンは位置：固定;ページでスクロール）、効果があまり良くありません..

フェードインとフェードアウトを行う方法はありますか? ありがとうございました

4

2 に答える 2

5

あなたのコードは良さそうですが、stopメソッドを追加して期間を短くした方がよいでしょう。これはうまくいくはずです：

$(window).scroll(function() {
    if ($(this).scrollTop() > 200) {
        $(".button").stop().animate({
            opacity: 1
        }, 500);
    } else {
        $(".button").stop().animate({
            opacity: 0
        }, 500);
    }
});​

デモ: http://jsfiddle.net/qXunw/

于 2012-05-18T23:50:31.397 に答える
0

VisioNの答えはうまくいくようです。追加する唯一のことは、ボタンがいつアニメーション化されるかを追跡するためのブール値です。

 var animating = false;

そうすれば、ifステートメントは次のようになります

 if ($(this).scrollTop() > 200 && !animating) { ...

目的は、現在の方法で、ユーザーがスクロールを続けるたびに、1.5 秒に設定された間隔でアニメーションがリセットされ続けることです。そのため、スクロールを停止するまでボタンは完全にフェードインしません。これは望ましくない場合があります。修正するには、フェードインを設定するときに「アニメーション」ブール値を true に設定し、コールバック関数で false に戻します。

于 2012-05-19T00:22:25.833 に答える