用jquery慢慢更改课程

Question

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

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

请帮忙^ h嗷嗷，我可以在跨度

Answer 1

要回答你的问题，你不能“慢慢”改变一个班级，因为现在的网络技术不支持它[虽然它可能与背景图像的颜色和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/

Answer 2

如果你说用动画的加载缓慢悬停活动图像，你可以使用jQueryUI的toggleClass()

// the 1000 signifies 1000ms, 1 second of tween time 
$('.customer1').toggleClass('customer1_active', true, 1000).toggleClass('customer1', false, 1000); 

Answer 3

达到这一目的有两种常见的方法，一个是jQuery UI的基础另一个是css3转换。

如果您需要IE兼容性，那么css3转换不是一个选项。

使用jQuery：

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

你可以在official documentation page阅读更多关于它。

另一种选择，使用CSS3转换：

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

小提琴可以发现here。

编辑

不能直接过渡的背景图像。您需要使用具有不同图像状态的多个元素或具有两种状态的精灵。我发现使用CSS3执行此操作时出现了detailed article，并且它还涵盖了兼容性问题。

末编辑

最后，从建筑的角度来看，你可能要考虑使用数据属性和jQuery交换图像，它远远比增加，其中仅url属性被更改多个类清洁剂。此外，阅读和管理更容易。