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

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

Answer 1

如果您谈到使用动画，可以使用jQueryUI toggleClass()

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

Answer 2

有两种常见的方法，一种是基于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属性的多个类要简单得多。此外，它更易于阅读和管理。

Answer 3

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

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

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

因此，更少的谈话和更多的代码......

HTML：

hover

CSS：

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

JS：

#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;
}

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

用jquery慢慢改变类

3 个答案: