1

ここに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");
    });
});

スパンの内容がdisplay:noneになるホバーオンエフェクトを実現しようとしていますが、ホバーするとすぐにdisplay:blockになります。css を使用して、負のマージンを使用して画像の上に配置することができましたが、問題は、このスパンを画像に対して中央に配置することです。

何か案は？

cssではできません。だから、jqueryの何かである必要がありますか?

ありがとう！

4

1 に答える 1

0

デモ jsFiddle

画像の中心 (幅/2) とスパンの中心 (幅/2) を計算する必要があります。
この を取得したら、スパンのvarで遊ぶことができます。 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()(要素上でのマウスの高速移動の問題)。

于 2012-04-08T18:23:11.233 に答える