0

jsFiddleが希望どおりに機能しています：http：//jsfiddle.net/6wuUc/64/

しかし、何らかの理由で、まったく同じコードを使用すると、ボタンをクリックしてもアニメーションが表示されません。これが私のページで使用しているコードです。

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">

<link rel="stylesheet" href="_/css/style.css">

<script src="_/js/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script>
    $('.sv_play_button').toggle(function(){
        $('#video').animate({left: '346'}, "fast");
    },function(){
        $('#video').animate({left: '0'}, "fast");
    });​
</script>

</head>

<body>

<div id="video">
    <div class="sublime">
        <p class="sv_play_button">Click</p>
    </div>    
</div>

</body>
</html>

そしてCSS：

#video, #video .sv_play_button {position: absolute;}

#video { margin-left: -346px; width: 670px; height: 546px; background-color: blue;}

.sublime { width: 1016px; height: 546px; background-color: red; opacity: 0.8; }

.sv_play_button {padding: 5px; background-color: yellow; top: 0px; right:0px; }​

なぜtoggle（）が私のページで機能しないのか誰かが知っていますか？前もって感謝します。

4

4 に答える 4

6

問題

$(document).ready()jqueryイベントを実行するために必要なでjqueryをラップしていません。

何が起こっているのかというと、javascriptはjqueryがロードされる前にjqueryコードを実行しようとしているため、ドキュメントがロードされるまで（を使用して.ready()）待機する必要があります。

新しいJavaScriptは次のようになります。

$(document).ready( function() {
$('.sv_play_button').toggle(function(){
        $('#video').animate({left: '346'}, "fast");
    },function(){
        $('#video').animate({left: '0'}, "fast");
    });​
});

注：すべての関数はこの範囲外である必要があることに注意してください。そうでない場合、関数を呼び出すことはできません。また、このラッパーは関数であるため、グローバル変数はその外部で定義する必要があることにも注意してください。

まだ参照していない場合は、次のように頭の中でjqueryを参照する必要があります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

参考文献

于 2012-05-03T01:24:03.620 に答える
3

ページが読み込まれる前にスクリプトが実行されているため、機能しません。スクリプトの実行中、検索する要素はまだ存在しないため、jQueryセレクターは動作するものを何も見つけません。

関数をドキュメント準備完了ブロックにラップすると、すべて設定されます。

jQuery(function(){
    your code here
})

参照：http ：//api.jquery.com/jQuery/#jQuery3

トグルはまた、あなたがそれを呼んでいる方法をサポートしていません。 http://api.jquery.com/toggle/

トグルは要素を表示または非表示にするだけなので、2つの関数を渡すことはできません（私が知る限り）。編集：MagicDevはトグルイベントAPIを指摘します

于 2012-05-03T01:22:47.260 に答える
0

</body>スクリプトをページの下部のタグのすぐ上に移動することもできます。

...
<script>
    $('.sv_play_button').toggle(function(){
        $('#video').animate({left: '346'}, "fast");
    },function(){
        $('#video').animate({left: '0'}, "fast");
    });​
</script>
</body>
于 2012-05-03T01:42:28.827 に答える
0

jqueryイベントを実行するために必要な$（document）.ready（）でjqueryをラップしていません。

于 2015-07-27T09:58:01.337 に答える