Javascript 导航面板的模糊动画？

当我将鼠标放在导航面板的一个元素上时，所有导航面板元素都将模糊，除了鼠标现在放在上面的一个元素，因此我做了以下操作：

function hoverEffect(id) {

$(document).ready(function () {
    $(".blurry-text").css({
        'color': 'transparent',
        'text-shadow': '1px 1px 3px rgba(255,0,0,0.5)'
    });

    $(id).css({
        'color': 'red',
        'text-shadow': '2px 2px 5px rgba(255,0,0,1)'
    });
});

function hoverEffect(id) {

$(document).ready(function () {
    $(".blurry-text").animate({
        color: 'transparent',
        textShadow: '1px 1px 3px rgba(255,0,0,0.5)'
    });

    $(id).animate({
        color: 'red',
        textShadow: '2px 2px 5px rgba(255,0,0,1)'
    });
});

}

它成功了，但我想让它成为动画，所以我做了这个：

function hoverEffect(id) {

$(document).ready(function () {
    $(".blurry-text").css({
        'color': 'transparent',
        'text-shadow': '1px 1px 3px rgba(255,0,0,0.5)'
    });

    $(id).css({
        'color': 'red',
        'text-shadow': '2px 2px 5px rgba(255,0,0,1)'
    });
});

function hoverEffect(id) {

$(document).ready(function () {
    $(".blurry-text").animate({
        color: 'transparent',
        textShadow: '1px 1px 3px rgba(255,0,0,0.5)'
    });

    $(id).animate({
        color: 'red',
        textShadow: '2px 2px 5px rgba(255,0,0,1)'
    });
});

}

但是它不起作用，它使所有的导航元素完全透明（我的意思是消失），除了一个被选中的。
那么，如何让它工作出了什么问题呢

---

注意：我有

jquery-1.11.3.js

和颜色插件

jquery.color.plus-names-2.1.2.js

来设置颜色事务的动画。

你说@Anirbann在这里提供你的代码是什么意思？我需要在代码中做很多更改以适应JSFIDLE我有很多外部文件@AnirbanNI在上面的最后一行注意到我已经有了

jquery.color.plus-names-2.1.2.js

，所以我想它会的work@BlackBlock事实上，你不能在一把小提琴中复制这个问题，这意味着你在提出关于StackOverflow的有用问题之前还有更多的工作要做。有关创建用于故障排除的有用示例的说明，请参阅。就目前而言，我们只有两个没有上下文的JS函数。你说@Anirbann在这里提供你的代码是什么意思？我需要在我的代码中做很多修改以适应JSFIDLE我有很多外部文件@AnirbanNI在上面的最后一行注释中说，我已经有了

jquery.color.plus-names-2.1.2.JS

，所以我想会的work@BlackBlock,事实上，你不能在一个小提琴复制这个问题，这意味着你有更多的工作要做，然后再问一个有用的问题StackOverflow。有关创建用于故障排除的有用示例的说明，请参阅。目前，我们只有几个没有上下文的JS函数。