Question

我有一个图像滑块，我已经管理了这样的图像

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

并希望在mouseover（）函数上设置动画/淡入隐藏图像，如下所示

Demo

但是当我使用firebug时，它说.animate（）不是一个函数。无论如何，当我将鼠标悬停在所有红色区域上时，我注意到了它，但只有它的动画效果令人惊讶。

问题

如何设置动画鼠标悬停的范围without placing a class inside spans and selecting like using nth-child？

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

updated demo //使用float：left

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

Answer 2

这是因为内联块，使用block和float: left，然后它应该有效。

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

Answer 3

要使每个范围升至mouseover的顶部，您需要确保它们是块级元素（或内联块），vertical-align设置为top。这将确保保证金实际上有效。

See this fiddle for a demo

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

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

animate不是函数错误出现

3 个答案: