jquery - 使用 jQuery 插件进行渐变，添加类以创建悬停效果导致跳转文本

Question

我正在这里开发一个新站点:http://dsrp.tv/newdurak

我正在尝试向文本添加金色渐变并在悬停时将其移除。我不知道如何使用插件删除或更改渐变，所以我尝试通过添加 CSS 类来实现。我需要一个适用于 Firefox 的解决方案，因此我无法使用背景剪辑。

当前解决方案的问题是悬停状态文本在第一个鼠标悬停事件上跳转。我试图在文档加载时提前触发鼠标悬停事件，但这似乎不起作用。

这是我试过的触发器:

$(document).ready(function(){
        //gold gradient for text
        $(".gold").pxgradient({
          step:4,
          colors: ["#efcd83", "#e9c279", "#d29856", "#cf9354"],
          dir: "y"
        });         

        $('.gold')
            .mouseenter(function() {
                $( this ).addClass('noshadow')
                         .addClass('pressed')
                         .addClass('hover');
            })
            .mouseleave(function() {
                $( this ).removeClass('noshadow')
                         .removeClass('pressed')
                         .removeClass('hover');
            });     

        //trigger hover on load
        $('li.gold').trigger('mouseenter'); 
        $('li.gold').trigger('mouseleave');

    });

这是插件的链接:jquery text gradient plugin

我有两个问题:

1. 是否可以从文本中删除渐变，以便我可以使用 jQuery 悬停悬停状态？

2. 是否可以在第一个 mouseenter 事件中阻止文本跳转？

Answer 1

这个解决方案有效。它需要在添加和删除类之间进行延迟。

$(window).load(function(){
        $('.gold').addClass('noshadow')
                  .addClass('pressed')
                  .addClass('hover');
        setTimeout(function (){                       
            $('.gold').removeClass('noshadow')
                     .removeClass('pressed')
                     .removeClass('hover');
            }, 500);    
    });