0

http://jsfiddle.net/asif097/AzRtC/3

ご覧のように、最初のボタンをクリックすると 2 つのボタンが表示され、いくつかの jquery 関数が実行されます (以下の赤い div を参照してください。より多くのコンテンツが読み込まれています)。2 番目のボタンでも同じことが起こります。

ここで、クリック機能の代わりにjqueryスクロール機能を使用したいと思いました（クリックと同じjqueryアニメーションを実行するため）。

これを試してみましたが、うまくいきません。コードを修正する人はいますか？

注：私はjqueryが初めてです。

 $(window).scroll(function() {
    if ($(this).scrollTop() > 1000) { // instead of the click button#go tried bellow code
      $(".more").css("display", "block");
      $("#block1").removeAttr('style');
      $("#block2").removeAttr('style');
      $("#block3").removeAttr('style');
      $("#block4").removeAttr('style');
      $("#block5").removeAttr('style');
      $("#block1").css('display', 'block').animate({
          opacity: 1,
          marginTop: 0,
          top: 0,
          }, 1300, 'easeOutExpo');

      $("#block2").css('display', 'block').animate({
          opacity: 1,
          marginTop: 0,
          top: 0,
          }, 2000, 'easeOutExpo');;

      $("#block3").css('display', 'block').animate({
          opacity: 1,
          marginTop: "13px",
          }, 2000, 'easeOutExpo');

      $("#block4").css('display', 'block').animate({
          opacity: 1,
          marginTop: "-208px",
          marginRight: 0
          }, 2000, 'easeOutExpo');

      $("#block5").css('display', 'block').animate({
          opacity: 1,
          marginTop: "13px",
          marginRight: 0
          }, 2000, 'easeOutExpo');

    }

    else if ($(this).scrollTop() > 1000) { // instead of the click button#go2 tried bellow code
      $(".more2").css("display", "block");
      $("#block6").removeAttr('style');
      $("#block7").removeAttr('style');
      $("#block8").removeAttr('style');
      $("#block9").removeAttr('style');
      $("#block10").removeAttr('style');
      $("#block6").css('display', 'block').animate({
          opacity: 1,
          marginTop: 0,
          top: 0,
          }, 1300, 'easeOutExpo');

      $("#block7").css('display', 'block').animate({
          opacity: 1,
          marginTop: 0,
          top: 0,
          }, 2000, 'easeOutExpo');

      $("#block8").css('display', 'block').animate({
          opacity: 1,
          marginTop: "13px",
          }, 2000, 'easeOutExpo');

      $("#block9").css('display', 'block').animate({
          opacity: 1,
          marginTop: "-208px",
          }, 2000, 'easeOutExpo');

      $("#block10").css('display', 'block').animate({
          opacity: 1,
          marginTop: "13px",
          }, 2000, 'easeOutExpo');
    }

    else {
        return false;
    }
});
4

1 に答える 1

2

コードの唯一の問題は、$(this).scrollTop()がより大きくなることは決してないということです1000。

の定義によると.scrollTop()

垂直スクロール位置は、スクロール可能領域の上のビューから非表示になっているピクセル数と同じです。スクロールバーが一番上にある場合、または要素がスクロールできない場合、この数値は0になります。

そのため、ウィンドウの高さは異なりますが、一番下までスクロールすると異なります。

だから私は$(this).scrollTop()+$(window).height()代わりに使用します$(this).scrollTop()、それはほとんど同じになります。

これがjsfiddleです。http://jsfiddle.net/AzRtC/5/

于 2013-02-06T02:34:24.050 に答える