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

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

});

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

你应该使用像 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');

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

这是它的jsfiddle

于 2012-05-13T01:42:51.823 回答