添加平滑淡入淡出/转换到jQuery悬停功能

我有一个功能悬停替换，插入悬停的背景图像，并在鼠标移除它。添加平滑淡入淡出/转换到jQuery悬停功能

<script type='text/javascript'> 
$(document).ready(function(){ 
    $("#l-1").hover(function() { 
     $("#r-box").css("background","url('<?php bloginfo('template_directory'); ?>/images/up.png') no-repeat transparent"); 
      }, function() { 
     $("#r-box").css("background","#3DA7BC"); 
    }); 
}); 
</script>

但我试图让过渡平滑和优雅，不只是进/出。我尝试了各种.animate函数来使它无效。

感谢您的帮助！

来源

2011-03-01 tigre

您可能无法为此类项目设置动画背景。从jQuery的动画页面：

所有的动画性能应动画到一个数值，除了下面提到;大多数属性是非数字的不能使用基本jQuery 功能动画。（例如，宽度，高度，或左侧可以为动画，但不能为背景色。）除非另有说明，否则属性值将被视为像素的数量。可以指定单位em和％，其中适用。

我推荐做的是使用其他方式显示背景图像中的内容。也许把它放在一个隐藏的span标签中，并通过执行fadeIn或fadeOut对其进行动画处理。

来源

2011-03-01 00:27:11 PriorityMark

它不会是很难解决，随着[cssHooks（http://api.jquery.com/jQuery.cssHooks/），但你会动画？ CSS中没有背景图片透明度;一些浏览器支持简单的背景颜色，但这对此无济于事。 – Tgr 2011-03-01 00:38:59

我一直在想的一种方法是将div从up状态变为over状态，但是在如何实现这种转换方面却陷入了困境。 – tigre 2011-03-01 00:44:42

也许如果你把一个更完整的代码放在一起，你可能会提供更多的见解/想法？ – PriorityMark 2011-03-01 16:56:04

您可以尝试使用jQuery为有问题的对象设置动画效果。

我的算法是这样的：

1）不透明度动画为某个值，这使得它更透明
2）在回调部，使用css({key:value})
3改变背景图像）动画不透明度回到原来的值

$('.your-base-object').hover(function(){ 
     $(this).animate({opacity: '0.9'}, 300, function(){ 
      $(this).css({ 
       background: "url('path/to/your-image')" 
      }); 
      $(this).animate({ 
       opacity: "1.0" 
      }, 300); 
     }) 
    }, function(){ 
     $(this).animate({opacity: '0.9'}, 300, function(){ 
      $(this).css({ 
       background: "url('path/to/your-image')" 
      }); 
      $(this).animate({ 
       opacity: "1.0" 
      }, 300); 
     }) 
    });

来源

2012-07-12 13:59:10 Ankur

添加平滑淡入淡出/转换到jQuery悬停功能

回答

相关问题