0

ホバー時にロールオーバー画像でフェードインする次のコードがあります。また、画像が同じ速度で変化したときに非表示にしてフェードインしたいというテキストを含むdivもあります。私は両方を別々に行う方法を知っていますが、これを完全な関数として書く方法がわかりません。助けていただければ幸いです。javascriptが無効になっている場合にテキストが表示されるように、jqueryでhideを表示したいと思います。

HTML：

<ul id="img_grid1">
    <li>
        <h2 class="bigimghead">Heading 1</h2>
        <img class="off" src="images/img1.jpg" alt=""/>
        <img class="on" src="images/img1over.jpg" alt=""/>
        <div class="copy">
            <p>some text, some text</p>
        </div>
    </li>

</ul>

CSS：

h2.bigimghead {
    font-family: Tahoma, Geneva, sans-serif;
    position: relative;
    z-index: 2000;
    font-size: 16px;
    top: 10px;
}

img.off {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
}

img.on {
    position: absolute;
    left:0; 
    top: 0;
}

ul#img_grid1 li {
    list-style-type: none;
}

.copy { z-index: 5000; position: relative; width: 200px; top: 20px; }

.copy p { color: #FFF; }

jquery：

 $(document).ready(function(){
$(function(){
   $(".copy").css("display","none")
});

$("img.off").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "normal");
$(".copy").fadeIn(500);
},
function() {
$(this).stop().animate({"opacity": "1"}, "normal");
$(".copy").fadeOut(500);
});
});
4

2 に答える 2

1

まず、absolute画像の位置を設定していますが、li には相対位置がありません。

次に、イベントを再度実行する前に、イベントが終了したことを確認する必要があると思います。

  • 別のイベントが達成されるのを防ぐためにいくつかを追加します（たとえばdelay(500)、遅延はアニメーション時間と等しくする必要があります）fadeIn(500)

  • イベントが次のように行われたかどうかを示す変数を追加します。

    $(document).ready(function(){
    var eventIsRunning = false;
    $("img.off").hover(
        function() {
            if(!eventIsRunning) {
                eventIsRunning = true;
                $(this).fadeIn();
                $('.copy').fadeOut();
                eventIsRunning = false;
            }

        },function() {
            if(!eventIsRunning) {
                 eventIsRunning = true;
                 $(this).fadeOut();
                 $('.copy').fadeIn();
                 eventIsRunning = false;
            }
        }
    );
});
于 2013-02-08T10:41:54.673 に答える
1

画像と同じ速度でテキストをフェードアウトしたい場合は、2 つのオプションがあります。

画像ホバー方法 ( jsfiddle )

この方法は、最初に不透明度を介してすべてのコピー div を非表示にすることを加えた既存のコードにあるものと似ています。

$(document).ready(function () {
    $('.copy').css("opacity", "0");
    $("img.off").on({
        mouseenter: function () {
            $(this).stop().animate({
                "opacity": "0"
            }, "normal");
            $('.copy').stop().animate({
                "opacity": "1"
            }, "normal");
        },
        mouseleave: function () {
            $(this).stop().animate({
                "opacity": "1"
            }, "normal");
            $('.copy').stop().animate({
                "opacity": "0"
            }, "normal");
        }
    });
});

リスト アイテムのホバー メソッド ( jsfiddle )

このメソッドは、画像だけではなくリスト項目全体をクリックしたときにアニメーションが発生することを前提としています。これにより、画像の真上に配置されたアイテム (見出しやコピー テキストなど) にカーソルを合わせても、mouseleaveハンドラーがトリガーされなくなります。

$(document).ready(function () {
    $('.copy').css("opacity", "0");
    $("#img_grid1").on({
        mouseenter: function () {
            $(this).find("img.off").stop().animate({
                "opacity": "0"
            }, "normal");
            $('.copy').stop().animate({
                "opacity": "1"
            }, "normal");
        },
        mouseleave: function () {
            $(this).find("img.off").stop().animate({
                "opacity": "1"
            }, "normal");
            $('.copy').stop().animate({
                "opacity": "0"
            }, "normal");
        }
    }, "li");
});

注:どちらの例でも、ソース ファイルがなくても表示されるように、画像にスタイルを追加しました。

于 2013-02-08T10:34:57.780 に答える