jquery - 与未在实时站点上执行的 jQuery 脚本发生冲突

Question

问题可能是由于 .on() 或其他脚本冲突造成的。我的想法为零。

正在运行:这是 jsFiddles 上的脚本 http://jsfiddle.net/ZtpEU/70/
不工作:这是实时代码:http://designobvio.us/test/middle.php

这两个是相同的代码；但是，在实时站点上，页面底部的 jquery 脚本将不会执行。有谁知道冲突在哪里产生？因为我在创建脚本后从 fiddle 中逐字复制了脚本。

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");
});​

​

Answer 1

您的实时版本的第 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");
    });
});