Jquery在我的wordpress主题中没有小提琴

Jquery works on fiddle doesn't in my wordpress theme

本文关键字：小提琴 我的 wordpress Jquery      更新时间：2023-09-26

我想制作简单的功能区动画，这是我的结果：

http://jsfiddle.net/eg5zC/50/

一切都按预期工作，但是在我的菜单中实现它后，它就停止了工作。我不得不将语法从div 更改为 ul，但它应该不会有任何区别。

我已经将必要的功能添加到我的私有文件中.js我可以在网站的页脚查看该功能。这是我的数字海洋开发服务器的IP：

http://178.62.215.130/SV/#home

有什么想法吗？我试图将代码直接放在页脚中，但这也不起作用。

在

$(document).ready(function()中放置一个控制台日志/警报命令，以查看文件/函数是否被调用并从那里继续。无论如何，你可以改用 CSS3，这里不需要 jQuery：

#SVsocmenu li a
{
    -webkit-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;    
}
#SVsocmenu li a:hover
{
    background-position: 0 0;   
}

在您的 JSFIDDLE 示例中：

#block div a
{
    -webkit-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;    
}
#block div:hover a
{
    background-position: 0 0;   
}

链接： http://jsfiddle.net/eg5zC/52/

首先，我建议遵循stackoverflow的格式准则，而不是将链接放入代码中。其次，如果您指定了小提琴链接，请同时提供一些代码（不包括基于 IP 的代码）。

第三，如果你只使用jQuery制作动画，我建议用CSS过渡来代替它。快速轻量级地添加几行 CSS 将消除 35 行看似不必要的 JS：

CSS代码 

#instagram a, #facebook a, #pinterest a {
    transition: all 0.45s cubic-bezier(0.6, 0, 0, 1);
}
#instagram:hover a, #facebook:hover a, #pinterest:hover a {
    background-position-y: 0px;
}

请参阅更新的小提琴：http://jsfiddle.net/eg5zC/53/

与jQuery动画相比，任何CSS过渡的第一个也是最重要的优点是浏览器自己处理动画，这通常与硬件加速配对。

当然，您可以指定除 cubic-bezier(0.6, 0, 0, 1) 以外的缓动。内置预设包括 linear 和 ease-in-out .

相关文章：