0

所以我有这个小 js 代码来动画图像（没什么花哨的）

    $(".afbeelding").mouseenter(function () {
        $(this).stop().animate({ width: '120%' }, 500);
    }, function () {
        $(this).stop().animate({ width: '120%' }, 500);
    });
    $(".afbeelding").mouseleave(function () {
        $(this).stop().animate({ width: '100%' }, 500);
    }, function () {
        $(this).stop().animate({ width: '100%' }, 500);
    });

这在放入 jsFiddle 时非常有效。

但是不知何故，当我尝试将其放入真实站点时，图像没有动画。

我为这个站点使用了 asp.net 和 vb。

这是 jsFiddle： http: //jsfiddle.net/ZvjxV/1/ 这是页面：http ://www.vannooijen.com/NL/collectie.aspx

有什么东西可以阻止它吗？

4

5 回答 5

3

当我查看您网站的源代码并且我发现没有元素具有类名afbeelding时，请仔细检查。

于 2013-07-24T09:32:07.180 回答
2

在您的代码中，您没有将事件绑定放入 document.ready 您需要放入document.ready以确保在访问之前将元素添加到 DOM。还要检查你没有任何带有类的元素afbeelding

$(document).ready(function(){
    $(".afbeelding").mouseenter(function () {
            $(this).stop().animate({ width: '120%' }, 500);
        }, function () {
            $(this).stop().animate({ width: '120%' }, 500);
        });
        $(".afbeelding").mouseleave(function () {
            $(this).stop().animate({ width: '100%' }, 500);
        }, function () {
            $(this).stop().animate({ width: '100%' }, 500);
        });
});

传递给 .ready() 的处理程序保证在 DOM 准备好后执行，因此这通常是附加所有其他事件处理程序和运行其他 jQuery 代码的最佳位置。在使用依赖 CSS 样式属性值的脚本时，在引用脚本Reference之前引用外部样式表或嵌入样式元素非常重要。

于 2013-07-24T09:19:03.843 回答
1

您正在实时站点中加载两个 jquery 版本（1.5.1 和 1.9.1）

http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js

和

http://code.jquery.com/jquery-1.9.1.js

删除 1.5.1 库

于 2013-07-24T09:23:27.247 回答
1

在您的网站上无法正常工作，因为您没有在保存图像class="afbeelding"的控件上设置类 ( ) input，因此脚本找不到要附加到它们的图像。

只需使用浏览器调试工具，您就可以轻松地自己发现它。

于 2013-07-24T09:19:15.873 回答
0

我还注意到有 2 个 jquery 实例。也许你尝试使用 jQuery.noConflict()

于 2013-07-24T10:09:26.673 回答