2

我有背景图像的条纹，它同时具有列表项的非活动和活动图像。我想慢慢加载活动类。

一个 Span 的 CSS 示例

.customer1 {    width: 105px; height:68px;  background:url(../img/in-customer1.png) 0px 15px  no-repeat;    display:block; }
.customer1_active {   background:url(../img//customer1_active.png) 0px -70px  no-repeat;  }

HTML

<div id="customers">
 <span class="customer1"></span> 
 <span class="customer2"></span>
  <span class="customer3"></span>
  <span class="customer4"></span> 
</div>

到目前为止尝试过

 $(this).removeClass('default').addClass('fixed').fadeIn('slow');

请帮助我如何在跨度悬停时缓慢加载活动图像

4

3 回答 3

2

有两种常见的方法，一种是基于 jquery ui，另一种是 css3 转换。

如果您需要 IE 兼容性，则不能选择 css3 转换。

使用 jQuery：

$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );

您可以在官方文档页面上阅读更多相关信息。

另一个选项，使用 CSS3 转换：

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

小提琴可以在这里找到。

编辑

您不能直接转换背景图像。您需要使用具有不同图像状态的多个元素或具有两种状态的精灵。我找到了一篇关于使用 CSS3 执行此操作的详细文章，它还涵盖了兼容性问题。

结束编辑

最后，从架构的角度来看，您可能需要考虑使用数据属性和 jquery 来交换图像，这比添加多个仅更改 url 属性的类要干净得多。此外，它更易于阅读和管理。

于 2012-11-19T06:37:14.697 回答
1

如果你说的是使用动画，你可以使用 jQueryUItoggleClass()

// the 1000 signifies 1000ms, 1 second of tween time
$('.customer1').toggleClass('customer1_active', true, 1000).toggleClass('customer1', false, 1000);
于 2012-11-19T06:31:20.657 回答
0

要回答你的问题，不，你不能“慢慢地”改变一个类，因为网络技术目前不支持它[虽然可以使用背景图像颜色和 css3，但这不适用于background-images]...

但是，要实现您想要的效果[即：鼠标悬停“悬停”效果与背景图像]，请使用以下方法：

<div>在每个<span>元素中添加一个覆盖容器“ ”。然后使用 css 将其绝对定位，添加背景图像 [将是悬停图像]。使 div 的大小与 span 相同，并在 span 标签上添加 mouseover/mouseout 处理程序，这应该<div>为其内部的不透明度设置动画。使元素响应“ hover”。

因此，少说话多代码....

HTML：

<div id="customers">
 <span class="customer1"></span> 
</div>​

CSS：

#customers span {   width: 105px; height:68px;  display:inline-block; }
.customer1{
    background:url(http://placekitten.com/105/68) 0px 0px  no-repeat;
}
.customer1_active{
    background:rgba(0,0,0,0.7);
}
#customers .active {
position:absolute;
}​

JS：

$("#customers span").each(function(){
    $(this).append("<div></div>").find("div").attr("class",$(this).attr("class")+"_active active").css({height:$(this).css("height"),width:$(this).css("width"),opacity:0});
    $(this).hover(function(){$(this).find("div").clearQueue().animate({opacity:1})},function(){$(this).find("div").clearQueue().animate({opacity:0})})
    });​

JSFiddle：http: //jsfiddle.net/mGcjU/1/

于 2012-11-19T07:30:38.330 回答