Question

所以我有这个小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

是否有阻止它的东西？

Answer 1

当我查看您网站的源代码时，我发现没有任何元素具有类名afbeelding，只需仔细检查即可。

Answer 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。

Answer 3

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

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

Answer 4

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

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

和

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

删除1.5.1库

Answer 5

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

Jquery在实时版本的asp.net页面中不起作用

5 个答案: