7

要素の左マージンを減らすことでDIVをスクロールするjQuery関数を作成しました。それは動作しますが、信じられないほど遅いです。あっという間にCPUを100％消費します：s

$(".scroll").hover(
    function () {
        var scroll_offset = parseInt($('#content').css('margin-left'));
        sliderInt = self.setInterval(function(){
            $content.css({'margin-left':scroll_offset+'px'});
            scroll_offset--;
        },8);
    }, 
    function () {
        clearInterval(sliderInt);
    }
);

明らかに、私はこの関数を8msごとに実行していますが、これは多くのことを求めています。セレクターを既にキャッシュしているので、パフォーマンスを向上させるために何ができるかわかりません。私はそれを間違った方法で行っているのですか？

4

2 に答える 2

24 

function play () {
  $('#ball').animate({left: '+=20'}, 100, 'linear', play);
}

function pause () {
  $('#ball').stop();
}

$("#bar").hover( play, pause );
#bar {
  margin-top: 20px;
  background: #444;
  height: 20px;
}
#bar:hover #ball {
  background: lightgreen;
}

#ball {
  position: relative;
  left: 0;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
}
<div id="bar">
  <div id="ball"></div>
</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

これは、setIntervalやsetTimeoutがなくても非常に簡単です。

  • 唯一重要なことは、それが関数コールバックを受け入れることを知ることです。これ.animate()は、ループ関数を作成する目的に理想的です。linearループを一定にするために、デフォルトの「swing」の代わりにイージングを使用してください。
  • アニメーションを停止するstop()には、アニメーションの蓄積を防ぐために使用できます。
  • 2つの関数を作成し、それらをhoverメソッドで使用するだけです。

CSS3の使用

jQueryを使用して再生/一時停止クラスを切り替えます。

function play() {
  $('#ball').addClass("play").removeClass("pause");
}

function pause() {
  $('#ball').addClass("pause"); // don't remove .play here
}

$("#bar").hover(play, pause);
#bar {
  margin-top: 20px;
  background: #444;
  height: 20px;
}
#bar:hover #ball {
  background: lightgreen;
}
#ball {
  position: relative;
  left: 0;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
}

.play {
  animation: ball-anim 5s infinite linear;
}
.pause {
  animation-play-state: paused;
}
@keyframes ball-anim {
  0%   { left: 0; }
  50%  { left: calc(100% - 20px); }
  100% { left: 0; }
}
<div id="bar">
  <div id="ball"></div>
</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

于 2012-04-19T00:35:07.983 に答える
1

.animate（）はそれを行うための良い方法です。例：

$(".scroll").hover(function(){
  $("#content").animate({
    marginLeft: "100px",
  }, 1500 );
});​

ワーキングデモ

ドキュメントを読んで、その使用方法を理解してください。

于 2012-04-18T23:44:28.470 に答える