1

我有一个图像滑块，我管理过这样的图像

+----------------------------------------------------------+
| +-----+ +------+ +------+ +------+ +------+ +----------+ |
| |     | |      | |      | |      | |      | |          | | visible images
| +-----+ +------+ +------+ +------+ +------+ +----------+ |
+----------------------------------------------------------+
  +-----+ +------+ +------+ +------+ +------+ +----------+  
  |     | |      | |      | |      | |      | |          | overflow hidden images
  +-----+ +------+ +------+ +------+ +------+ +----------+

并希望像这样在 mouseover() 函数上为隐藏图像设置动画/淡入淡出

演示

但是当我使用萤火虫时，它说 .animate() 不是一个函数。无论如何，当我将鼠标悬停在所有红色跨度上时，我注意到在我的小提琴中，只有它的动画效果惊人。

问题

如何动画到鼠标悬停的跨度without placing a class inside spans and selecting like using nth-child？

我只需要在鼠标悬停的一个跨度上设置 margin-top 。我也必须使用淡入淡出效果。

更新的演示//使用浮动：左

4

3 回答 3

1

这是因为内联块，使用blockand float: left，那么它应该可以工作。

http://jsfiddle.net/bts7e/3/

于 2013-09-03T06:06:40.743 回答
1

这是你想做的吗？

$('div').mouseover(function(){
   //alert('hi');  //working
    $('span').animate({'margin-top':'-10px'},1000); 
});

编辑 - 从头开始​​，这是您需要更改的内容：

span{
    background-color: red;
    height: 20px;
    width: 20px;
    display: block;
    float: left;
    border: 1px solid white;
}
于 2013-09-03T06:03:04.537 回答
1

为了让每个跨度上升到顶部mouseover，您需要确保它们是块级元素（或内联块），并vertical-align设置为top. 这将确保边距确实有效。

看到这个小提琴的演示

您的示例的问题是边距不会触发鼠标悬停事件。其他属性（如填充）将触发它，因为它被认为是元素的一部分。由于您的特定示例不能使用填充（否则它将改变红色跨度的大小，您可以使用用户不可见的其他一些属性，但可以为您提供所需的功能。我建议使用白色边框。

演示：http: //jsfiddle.net/UZKwY/1/

于 2013-09-03T06:13:28.437 回答