淡出/在动画中？

我有一个标志是一个两个图像精灵。当您将鼠标悬停在上面时，背景位置会简单地移动到底部以显示新图像。淡出/在动画中？

如果可能的话，我想添加一点淡入淡出的过渡，谁能告诉我这个最好的方法。

如果有帮助，这是我的CSS：

#header h1#logo a { 
    background: url(../images/logo.jpg); 
    background-position: 0 0; 
    width: 74px; 
    height: 74px; 
    display: block; 
    text-indent: -30000px; 
} 

#header h1#logo a:hover { background-position: 0 -85px;}

感谢

来源

2010-11-04 Blackbird

这样做将使用两个嵌套元素的更优雅的方式和.hover()功能：

HTML

<a class="logo"> 
    <div class="logo inner" style="display: none;"></div> 
</a>

CSS

.logo { 
    background: url(../images/logo.jpg); 
    background-position: 0 0; 
    width: 74px; 
    height: 74px; 
    display: block; 
    text-indent: -30000px; 
} 

.inner { 
    background-position: 0 -85px !important; 
}

jQuery的

$("a.logo").hover(function() { 
    $(".inner").fadeIn('slow'); 
}, function() { 
    $(".inner").fadeOut('slow'); 
});

希望这有助于！

来源

2010-11-04 17:53:22

良好的解决方法，很好地工作，非常感谢很多。 – Blackbird 2010-11-04 20:05:00

很高兴为您服务！ :) – 2010-11-04 20:06:34

<script> 
$(function() { 
$("#ui").hide(); 
$("#jq").mouseover(function() { 
    $(this).hide(); 
    $("#ui").fadeIn(); 
}); 
$("#ui").mouseout(function() { 
    $(this).hide(); 
    $("#jq").fadeIn(); 
}); 
}); 
</script> 
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" id="jq" /> 
<img src="http://jqueryui.com/images/logo.gif" id="ui" />

来源

2010-11-04 17:04:29

淡出/在动画中？

回答

相关问题