0

这是我正在处理的页面：http: //dsa.dartmouth.edu/。幻灯片下方是四个可在悬停时更改颜色的面板。背景颜色效果很好，但标题颜色在变白后永远不会变回深色。下面是控制这个的javascript - 我怎样才能让h2文本在推出时变回深色？

$featured_control_item.hover( function(){
        if ( ! $(this).hasClass('active-slide') ){
            $(this).find('.et_slide_hover').css({'display':'block','opacity':'0'}).stop(true,true).animate( { 'opacity' : '1' }, featured_controllers_opacity_speed );
            $(this).find('.controller').find('h2').css({'color':'white'}).stop(true,true).animate( { 'color' : '#656464' }, featured_controllers_opacity_speed );
        }}, function(){
        $(this).find('.et_slide_hover').stop(true,true).animate( { 'opacity' : '0' }, featured_controllers_opacity_speed );
        $(this).find('.controller').find('h2').stop(true,true).animate( { 'color' : '#656464' }, featured_controllers_opacity_speed );
    } );
4

3 回答 3

1

您的问题是jQuery 动画功能不允许动画颜色。您将不得不为此使用单独的插件。

所有动画属性都应动画为单个数值，除非以下说明；大多数非数字属性无法使用基本的 jQuery 功能进行动画处理（例如，宽度、高度或左侧可以设置动画，但背景颜色不能设置，除非使用 jQuery.Color()插件）。除非另有说明，否则属性值被视为像素数。可以在适用的情况下指定单位 em 和 %。

于 2012-07-26T02:43:29.173 回答
1

您无法为颜色变化设置动画，因此可以尝试：

$featured_control_item.hover(function(){
  if (!$(this).hasClass('active-slide'))
  {
    $(this).find('.et_slide_hover').css({'display':'block','opacity':'0'}).stop(true,true).animate({'opacity' : '1'}, featured_controllers_opacity_speed);
    $(this).find('.controller').find('h2').stop(true,true).css({'color' : 'white'});
  }}, function(){
    $(this).find('.et_slide_hover').stop(true,true).animate( { 'opacity' : '0' }, featured_controllers_opacity_speed);
    $(this).find('.controller').find('h2').stop(true,true).css({'color' : '#656464'});
});
于 2012-07-26T02:47:15.647 回答
0

除非你也包含jQuery UI ，否则jQuery.animate()不会做颜色。所以下载并包含 jQueryUI JS 文件（在 jquery.js 之后包含它），或者将您的代码更改为仅使用..css()

于 2012-07-26T02:43:14.010 回答