jquery - 使用jquery在顶部固定大小的图像上居中可变宽度跨度

Question

这是jsfiddle

//Fade in and out animation on hove buttons - icon set, features.
$(window).load(function() {
    $("ul#features_icons li img").hover(function() {
        $(this).next("span").animate({ opacity: "show" }, "fast");
    }, function() {
        $(this).next("span").animate({opacity: "hide"}, "fast");
    });
});

我正在尝试实现悬停效果，其中跨度的内容将显示：无，但只要将鼠标悬停在它上面就会变成显示：块。使用css，我设法通过使用负边距将它放在图像的顶部，但我的问题是使这个跨度相对于图像居中。

有任何想法吗？

使用 css 是不可能的。那么一定是用jquery的东西吗？

谢谢！

Answer 1

演示 jsFiddle

我们必须计算图像的中心（宽度/2）和跨度的中心（宽度/2）。
有了这个vars 之后，我们就可以玩span marginLeft了。

var spanW = 0;
var imgW = $('li img').width()/2;
$(window).load(function() {
    $("ul#features_icons li img").hover(function() {
        spanW = $(this).next("span").width()/2;
        $(this).next("span").css({marginLeft: -spanW-imgW }).stop().animate({ opacity: "show" }, "fast");
    }, function() {
        $(this).next("span").stop().animate({opacity: "hide"}, "fast");
    });
});

我什至.stop()在您的动画之前添加了以防止动画冒泡（在您的元素问题上快速移动鼠标）。