模糊导航面板的动画？

Question

当我将鼠标放在导航面板的一个元素上时，所有导航面板元素都将模糊，除了鼠标现在已经结束的那个，所以我这样做：

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和来自here的颜色插件jquery.color.plus-names-2.1.2.js来设置颜色交易的动画。