Question

我想制作简单的彩带动画，这就是我的结果：

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

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

我已将必要的功能添加到我的private.js文件中，我可以在我网站的页脚中查看该功能。这是我的digitalocean开发服务器的IP：

http://178.62.215.130/SV/#home

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

Answer 1

在$(document).ready(function()中放置一个console log / alert命令，以查看是否正在调用文件/函数并从那里继续。无论如何，你可以改用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;   
}

link：http://jsfiddle.net/eg5zC/52/

Answer 2

首先，我建议遵循stackoverflow的formatting guidelines，而不将链接放入代码中。第二，如果您指定了小提琴链接，请同时提供一些代码（不包括基于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/

任何CSS转换相对于jQuery动画的首要优势是浏览器本身处理动画，通常与硬件加速配对。

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

Jquery在小提琴上工作不在我的wordpress主题中

2 个答案: