0

だから私は画像をアニメーション化するためのこの小さなjsコードを持っています(空想は何もありません)

    $(".afbeelding").mouseenter(function () {
        $(this).stop().animate({ width: '120%' }, 500);
    }, function () {
        $(this).stop().animate({ width: '120%' }, 500);
    });
    $(".afbeelding").mouseleave(function () {
        $(this).stop().animate({ width: '100%' }, 500);
    }, function () {
        $(this).stop().animate({ width: '100%' }, 500);
    });

これは、jsFiddle に入れると完全に機能します。

しかし、どういうわけか実際のサイトに入れようとすると、画像が動きません。

このサイトでは asp.net と vb を使用しました。

これは jsFiddle です: http://jsfiddle.net/ZvjxV/1/ そして、これはページです: http://www.vannooijen.com/NL/collectie.aspx

それを妨げるものはありますか？

4

5 に答える 5

3

あなたのサイトのソース コードを表示すると、 class nameafbeeldingを持つ要素がないことがわかりました。それを再確認してください。

于 2013-07-24T09:32:07.180 に答える
2

あなたのコードでは、イベントのバインドを document.ready に配置していません。アクセスする前に要素が DOM に追加されるようにするために、 document.readyに配置する必要があります。また、クラスを持つ要素がないことを確認してくださいafbeelding

$(document).ready(function(){
    $(".afbeelding").mouseenter(function () {
            $(this).stop().animate({ width: '120%' }, 500);
        }, function () {
            $(this).stop().animate({ width: '120%' }, 500);
        });
        $(".afbeelding").mouseleave(function () {
            $(this).stop().animate({ width: '100%' }, 500);
        }, function () {
            $(this).stop().animate({ width: '100%' }, 500);
        });
});

.ready() に渡されたハンドラーは、DOM の準備が整った後に実行されることが保証されているため、通常、これは他のすべてのイベント ハンドラーをアタッチして他の jQuery コードを実行するのに最適な場所です。CSS スタイル プロパティの値に依存するスクリプトを使用する場合は、スクリプトを参照する前に、外部のスタイルシートを参照するか、スタイル要素を埋め込むことが重要です。

于 2013-07-24T09:19:03.843 に答える
1

class="afbeelding"画像を保持するコントロールにクラス ( )を設定していないため、サイトが機能していないinputため、スクリプトはこの画像を見つけて添付することができません。

ブラウザのデバッグ ツールを使用するだけで、自分で簡単に見つけることができます。

于 2013-07-24T09:19:15.873 に答える
1

ライブ サイトに 2 つの jquery バージョン (1.5.1 および 1.9.1) をロードしています。

http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js

と

http://code.jquery.com/jquery-1.9.1.js

1.5.1 ライブラリを削除

于 2013-07-24T09:23:27.247 に答える