2

jQueryを使用animate()していますが、機能しません。divを取得して、それを含み、を含む別のdivをスライドさせようとしていoverflow:hiddenます。私はleftアニメーションと何ものすべての組み合わせを試しました。念のため、div（ギャラリー）の幅も変更してみましたが、幅は変更されますが、左は変更されません。

私は何が間違っているのですか？

function an() {

  //$('#gallery').fadeOut();
  //$('#gallery').animate({left:'-=1000'},'slow');
  $('#gallery').animate({
    'left': '+=100px'
  }, 'slow');

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div align="center" style="position:relative; height:137px; overflow:hidden; width:1000px; border:3px solid #ff0000;">
  <div id="gallery" style="background-color:#033; width:100px; height:137px;"></div>
</div>
<a href="#" onclick="an(); return false;">test</a>

JSFiddleで表示

4

3 に答える 3

12

#gallery div aposition:relativeを指定すると、正常に機能します。

function an() {

  //$('#gallery').fadeOut();
  //$('#gallery').animate({left:'-=1000'},'slow');
  
  $('#gallery').animate({
    'left': '-=700px'
  }, 'slow');

}
#gallery {
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div align="center" style="position:relative; height:137px; overflow:hidden; width:1000px; border:3px solid #ff0000;">
  <div id="gallery" style="background-color:#033; width:100px; height:137px;"></div>
</div>
<a href="#" onclick="an(); return false;">test</a>

JSFiddleで表示

ちなみに、可能な限りインラインJavaScript（onclickなど）とCSSは避けてください。また、このalign属性はHTML 4.01で非推奨になり、HTML5で削除されました。

于 2012-05-09T19:33:32.053 に答える
1

position: relative関数をアクティブにするには、main属性の下にあるすべての属性に設定する必要がありanimate()ます。

<div style='position:fixed'>
<div style='position:relative'></div>
</div>
于 2020-01-13T12:32:34.703 に答える
0

単に追加します：

style="position:relative;"

移動したい要素に移動します。

  • コンテナdivに追加する必要はありません。
  • コンテナを基準にして、位置に応じて移動します。
于 2017-08-22T06:59:32.420 に答える