Question

The problem could be because of .on() or another script conflicting. I have zero idea.

WORKING: Heres the script on jsFiddles http://jsfiddle.net/ZtpEU/70/
NOT-WORKING: Here’s the live code: http://designobvio.us/test/middle.php

Both of these are the same code; however, on the live site the jquery script at the bottom of the page won’t execute. Does anyone know where the conflict is being created? For i copied the script verbatim from fiddles after i created it.

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

Script

$("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

It looks like you have a non-printable character on line 59 of your live version. it is right after the semicolon but before the line-break. Copy/paste your JS into jsbeautifier or something to sanitize it. That fixed it for me:

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