问题可能是由于.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");
});
最佳答案
看来您的即时版本的第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");
});
});
关于jquery - 与不在实时站点上执行的jQuery脚本冲突,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10568663/