Question

问题可能是因为.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");
});

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

Answer 2

在你倒数第二次之后有一个奇怪的空白字符

});

尝试删除该行并重新创建。

你应该使用像jslint这样的东西来捕捉这样的东西。

Answer 3

刚刚意识到你的.on()函数应该像这样重写：

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

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

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

}}, 'a');

这样，您的标记只有一个处理程序，如果您想稍后添加其他事件，只需将它们添加到列表中即可。

以下是jsfiddle

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

3 个答案: