0

左から div をアニメーション化しようとしています。ウェブ上のチュートリアルの 1 つから勉強していましたが、何らかの理由でクエリが機能しません。理由がわかりません。クエリに何か問題がありますか?

<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
    <head>
        <title>jquery practice page</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
       <script type="text/javascript">

$(document).ready(function() {
 $('#slideleft button').click(function() {
    var $lefty = $(this).next();
    $lefty.animate({
      left: parseInt($lefty.css('left'), 10) == 0 ?
      -$lefty.outerWidth() :
      0
    });
  });
  });

</script>

<style type="text/css">


.slide {
  position: relative;
  overflow: hidden;
  height: 120px;
  width: 350px;
  margin: 1em 0;
  background-color: #ffc;
  border: 1px solid #999;
}
.slide .inner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 338px;
  height: 36px;
  padding: 6px;
  background-color: #4c5;
  color: #333;
  }

#slidebottom .inner{
    display:none;
}

.slide button {
  margin: .7em 0 0 .7em;
}

</style>

    </head>
    <body>

<div id="slidebottom" class="slide">
  <button>slide it</button>
  <div class="inner">This is supposed to slide in from the left</div>
</div>    
    </body>
</html>

以上が全体です。私は間違いを見つけることができないようです。誰かが私を助けることができますか？

4

2 に答える 2

1

コードで編集する項目は 3 つあります。

1. 間違ったセレクター:
変更

$('#slideleft button').click(function() {

に

$('#slidebottom button').click(function() {

2.要素を表示する必要があります：
cssでスライド要素を非表示にします。そのため、スライドする前に、再度表示する必要があります。

$lefty.animate({
    left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() : 0,
    opacity: "show"
});

3.要素が間違った場所
にある最初のボタンを押したときにスライドするように、スライドするdivを左に移動する必要もあります。 

slide .inner {
    position: absolute;
    left: -350px;

この JSFiddle を参照してください: http://jsfiddle.net/ax4AC/2/

于 2013-01-26T19:33:27.110 に答える
0

デモのいくつかの間違い:

$('#slideleft button') は正しくありません。$('#slidebottom button') である必要があります。

css の下にあるこれを削除する必要があります。そうしないと、何も表示されません。

#slidebottom .inner{
    display:none;
}

デモはこちら: http://jsfiddle.net/8FLZC/1/

于 2013-01-26T19:13:08.033 に答える