jQuery .toggleClass（）在本地工作，但不在远程服务器上

Question

请帮忙。此代码在本地工作，但在我将其上载到远程服务器后不会。它似乎不是一个cdn问题，因为我将一个警告声明作为测试。第二个声明是针对一个单独的页面，它在那里工作。我通过我的html页面底部的cdn引用jQuery，并在下面指向我的javascript文件的链接。任何帮助将不胜感激。

$(document).ready(function () {
    $('.thmb').hover(function () {
        var x = $('.thmb').index(this);
        $('.info_art').eq(x).toggleClass("hover-animation");
    });
    $('.thmbs_pdg_div a').click(function (evt) {
        evt.preventDefault();
        var divname = this.name;
        $("#" + divname).show().siblings().hide();
    });
});

以下是我在html页面末尾添加的代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="javascript/jquery-1.8.2.min.js">  <\/script>')</script>
<script type="text/javascript" src="javascript/artwork.js"></script> 

以下是该网页的网址：http://www.kipdeeds.com/artwork_page.html

关于不起作用的页面的一些附加信息：有七个类别，每个类别的文本是精灵（例如“纸上”，“新艺术”等）。当一个人盘旋时，该位置应该移动，用箭头图标显示文本的新图像。我写的程序将允许相应的图像图标在显示文本的精灵中实现相同的效果。

现在我不会改变代码，直到得到反馈（想法比我的好）。

Answer 1

你的JS很好。

问题在于您的CSS和图像存在差异。这是你的CSS：

a.art_paper {
    background: url("../assets/artwork_page/on_paper.gif") repeat scroll 0 0 transparent;
    display: block;
    height: 20px;
    margin-top: 33px;
    width: 95px;
}

a:hover, #artwork_main_div .hover-animation {
    background-position: 0 -100px;
}

她是你的形象：（95px x 20px）

你无限重复你的背景图像，恰好是20px高。当.hover-animation类处于活动状态时，它会将背景向下滑动100px，这将使您获得图像的第5次（100/20 = 5）垂直迭代...它看起来与原始图像完全相同。