2

ここに私のコードがあります: http://jsfiddle.net/FUnhK/

$(document).ready(function(){
    $("img").hover(function(){
        var text = $(this).attr("alt");
        $("h2").text(text);
    });
    $("img").mouseout(function(){
        $("h2").html("Basic Text");
    });

});

必要なのは hover() および mouseout() 関数のアニメーションです。そのため、画像の 1 つにカーソルを合わせるとテキストが表示され、マウスが画像領域を離れると「基本テキスト」が表示されます (上記のコード)。http://jsfiddle.net/xgyaQ/のようになり ますが、ご覧のとおり、表示目的でのみ animate({ opacity: 'toggle' }) 関数を追加したため、正常に機能していません。

2番目のアニメーション効果を持つ最初のコードの機能が必要なだけで、それを実現するためにjavascriptをどのように書くべきかわかりません。

もう1つ-画像間の空のスペースにカーソルを合わせたときに基本テキストが表示されないようにするには、何を変更すればよいか考えてください。

ありがとうございました！

PS OK、Liquinaut のおかげで、fadeIn 効果で動作させましたが、最初に要素を非表示にしました。

$(document).ready(function () {
    $("img").mouseenter(function () {
        var text = $(this).attr("alt");
        $("h2").text(text).hide().fadeIn(400);
    });
    $("ul").mouseleave(function() {
        $("h2").text('Basic Text').hide().fadeIn(400);
    });
});

http://jsfiddle.net/FUnhK/3

それが私が求めていた効果です。それを達成するためのより良い方法はありますか？

4

2 に答える 2

1

このサンプルは良いと思います

$(item).hover(function() { ... }, function() { ... });
In your case:

    $("a.button").hover(
       function() {
          $(this).animate({"marginTop": "0px"}, "fast");
       },
       function() {
          $(this).animate({"marginTop": "16px"}, "fast");
       }
    );
于 2013-02-12T13:34:24.677 に答える
0

これは、HTML/CSS に基づいて、おそらく必要なものです。

$(document).ready(function () {
    $("img").mouseenter(function () {
        var text = $(this).attr("alt");
        $("h2").text(text);
    });
    $("ul").mouseleave(function() {
        $("h2").text('Basic Text');
    });
});

それにもかかわらず、CSS の一部を再構築することを検討する必要があります。絶対配置のイメージ要素を内部に含むフローティング リスト要素は意味をなさないからです。

cya、Liquinuat

于 2013-02-12T13:48:34.040 に答える