2

問題は、.on() または別のスクリプトの競合が原因である可能性があります。私はゼロのアイデアを持っています。

動作中: jsFiddles のスクリプトはこちらhttp://jsfiddle.net/ZtpEU/70/
非動作中 : ライブ コードはこちら: http://designobvio.us/test/middle.php

これらは両方とも同じコードです。ただし、ライブ サイトでは、ページの下部にある jquery スクリプトは実行されません。競合がどこで作成されているかを誰かが知っていますか? 私はそれを作成した後、フィドルからスクリプトをそのままコピーしました。

HTML

<ul id="videos">
    <li><a href="#">shit swag people say</a></li>
    <li><a href="#">imdabest</a></li>
    <li><a href="#">jersey shore audition</a></li>
    <li><a href="#">rifle burs</a></li>
    <li><a href="#">mvc3: best combos dat ass</a></li>
    <li><a href="#">snacks</a></li>
</ul>​

CSS

ul#videos > li > a
{
    opacity: .5;
    color: #222;
    text-decoration: none;
}

ul#videos:hover > li > a
{
    opacity: .3;
    text-shadow: 0px 0px 6px #bbb;
    color: #bbb;
} 

ul#videos > li:hover > a
{
    opacity: 1;
    text-shadow: none;
    color: #222;
}

脚本

$("ul#videos li a").on('mouseenter', function() {
    $(this).animate({"padding-left": "50px"}, "normal");
});

$("ul#videos li a").on('mouseleave', function() {
    $(this).stop(true).animate({"padding-left": "0px"}, "slow");
});​

</p>

4

3 に答える 3

2

ライブバージョンの59行目に印刷できない文字があるようです。セミコロンの直後ですが、改行の前です。JSをコピーしてjsbeautifierなどに貼り付けてサニタイズします。それは私のためにそれを修正しました：

$(document).ready(function () {
    alert('hello');
    $("ul#videos li a").on('mouseenter', function () {
        $(this).animate({
            "padding-left": "50px"
        }, "normal");
    });
    $("ul#videos li a").on('mouseleave', function () {
        $(this).stop(true).animate({
            "padding-left": "0px"
        }, "slow");
    });
});
于 2012-05-13T01:36:25.613 に答える
2

最後から2番目の後に奇妙な空白文字があります

});

その行を削除して再作成してみてください。

このようなものをキャッチするには、jslintのようなものを使用する必要があります。

于 2012-05-13T01:38:41.933 に答える
0

.on()関数を次のように書き直す必要があることに気づきました。

$("#videos li").on({

    mouseenter: function() {
         $(this).animate({"padding-left": "50px"}, "normal");
    },

    mouseleave: function() {
         $(this).stop(true).animate({"padding-left": "0px"}, "slow");

}}, 'a');

このように、マークアップのハンドラーは1つだけで、後で他のイベントを追加する場合は、それらをリストに追加するだけです。

これがそのためのjsfiddleです

于 2012-05-13T01:42:51.823 に答える