Question

以下是我正在处理的页面：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 );
    } );

Answer 1

您的问题是jQuery animate功能不允许动画颜色。你必须使用一个单独的插件。

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

Answer 2

您无法为颜色更改设置动画，因此请尝试：

$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'});
});

Answer 3

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

Jquery淡出淡出问题

3 个答案: