3

現在、タグにカーソルを合わせると画像が表示されます。私は写真を表示することの主な問題を解決することができました。問題は、ホバリングがすばやく発生するとグリッチが発生することです。それを避けるために離れていますか？また、ページが読み込まれたときに表示するデフォルトの画像を設定するにはどうすればよいですか？JSFIDDLE

HTML

<div id="links">    
    <a href="example.htm" class="large magenta awesome" data-content="cheeseburger">Cheeseburger »</a>
    <a href="example.htm" class="large blue awesome" data-content="tacos">Tacos »</a>
    <a href="example.htm" class="large red awesome" data-content="salads">Salads »</a>
    <a href="example.htm" class="large orange awesome" data-content="bread-sticks">Bread Sticks »</a>
    <a href="example.htm" class="large yellow awesome" data-content="dessert">Dessert »</a>
</div>

Jquery

$("div#links > a").hover(
    function(){
        var ID = $(this).data("content");
        $("div#images").children("img#" + ID).fadeIn("slow");
    },
    function() {
        var ID = $(this).data("content");
        $("div#images").children("img#" + ID).hide();
    }
);​

グリッチ

ここに画像の説明を入力してください

4

4 に答える 4

3

問題は、ホバリングがすばやく発生するとグリッチが発生することです。それを避けるために離れていますか？

これはグリッチではありません。fadeInアニメーションを使用しています。アニメーションよりも速くリンクにカーソルを合わせると、その「グリッチ」の体験が完了します。

以前に実行中のアニメーションと衝突しないようにするには、現在のアニメーションとキューに入れられたアニメーションを停止する必要があります。

交換

$("div#images").children("img#" + ID).fadeIn("slow");

と

$("div#images").children("img#" + ID).stop(true, true).fadeIn("slow");

DEMO-次のアニメーションキューを開始する前にアニメーションキューをクリアします

ページが読み込まれたときに表示するデフォルトの画像を設定するにはどうすればよいですか？

デフォルトの画像も表示するコードを追加しました。デフォルトの画像を初めて使用するときにメニュー項目にカーソルを合わせたときに、奇妙な視覚効果を防ぐため。コードは、デフォルトの画像を表示しているかどうかを確認し、表示されている場合は、現在のメニューの画像がデフォルトの画像であるかどうかをさらに確認します。

そうである場合は、とにかく表示されているので非表示にしませんが、そうでない場合は、新しい画像をフェードインする前にデフォルトの画像を表示します。

これが理にかなっていることを願っています。以下の完全なコードとデモを参照してください。

// Indicates if default image is shown
var showingDefaultImage = true;

var $images = $("div#images");
var $defaultImage = $images.children("img#tacos");

// Display a default image
$defaultImage.show();

$("div#links > a").hover(

function() {
    var ID = $(this).data("content");
    var $image = $images.children("img#" + ID);

    if (showingDefaultImage) {
        showingDefaultImage = false;
        if (!$image.is($defaultImage)) {
            $defaultImage.hide();
        }
    }

    $image.stop(true, true).fadeIn("slow");
}, function() {
    $images.children().hide();
});​

デモ-デフォルトの画像を表示

上記のデモのコードも、セレクターをキャッシュすることでもう少し最適化されています。

最後にホバーしたタグから最新の画像を残すことは可能でしょうか？（画像を非表示にして空白のままにする代わりに）

私が正しく理解していれば、マウスでメニューを離れるときに画像を非表示にするのではなく、最後にカーソルを合わせたメニューの画像を表示したままにします。

これを行うには、の2番目の関数を削除します。hoverこれは不要になったため、mouseenter代わりにイベントを添付できます。

var $images = $("div#images");
var $currentImage = $images.children("img#tacos");

$currentImage .show();

$("div#links > a").mouseenter(function() {
    var ID = $(this).data("content");
    var $image = $images.children("img#" + ID);

    if (!$image.is($currentImage)) {
        $currentImage.hide();
    }

    $currentImage = $image;
    $image.stop(true, true).fadeIn("slow");
});

デモ-mouseenterで画像をフェードインし、最後の画像を表示したままにする

上記のコードには、最適化のためのセレクターのキャッシュと、新しいホバーされたメニュー項目が最後にホバーされたメニュー項目と同じであるときに「ちらつき」が発生しないようにするロジックが含まれています。

于 2012-09-23T01:39:05.053 に答える
1

http://jsfiddle.net/7Wp9z/7/を参照してください

フランソワ・ヴァールが言っstopたように、アニメーションを停止するために使用します。ただし、IDを使用する代わりに、data-contentインデックスを使用できると思います。

HTML：

<div id="links">    
    <a href="example.htm" class="large magenta awesome">Cheeseburger »</a>
    <a href="example.htm" class="large blue awesome">Tacos »</a>
    <a href="example.htm" class="large red awesome">Salads »</a>
    <a href="example.htm" class="large orange awesome">Bread Sticks »</a>
    <a href="example.htm" class="large yellow awesome">Dessert »</a>
</div>

<div id="images">
    <img src="http://media.smashingmagazine.com/wp-content/uploads/images/brand-ux/cb.jpg">
    <img src="http://adventuresoflittlemiss.files.wordpress.com/2012/07/tacos.jpg">
    <img src="http://www.growingappetite.com/wp-content/uploads/2011/05/chicken-salad1.jpg">
    <img src="http://afflictor.com/wp-content/uploads/2010/10/breadsticks1.jpg">
    <img src="http://1.bp.blogspot.com/-IaURSrV70LI/T4YzPubl9EI/AAAAAAAAGSg/AEdd-eLuJUk/s1600/Cooking+Weekly.jpg">
</div>

JavaScript：

$("div#links > a").hover(
    function(){
        $("#images>img")
            .hide()
            .stop(true,true)
            .eq($(this).index()).fadeIn("slow");
    },
    function() {
        $("#images>img").hide();
    }
);
于 2012-09-23T01:43:43.000 に答える
0

マウスアウト部分で非表示にする子を指定しないようにしましたか？

$("div#links > a").hover(
    function(){
        var ID = $(this).data("content");
        $("div#images").children("img#" + ID).fadeIn("slow");
    },
    function() {
        $("div#images").children().hide();
    }
);​
于 2012-09-23T01:34:07.667 に答える
0

グリッチは、画像がまだロードされていないために発生する可能性があります。プリロードの手法を調べる必要があります。表示する前に、関連する画像が読み込まれるのを常に待つ必要があります。

ただし、画像が読み込まれていることを示すか、画像が読み込まれるまでホバリング効果を有効にしないことで、ユーザーエクスペリエンスを向上させることができます。

私は怠惰なので、おそらく最後のケースで行くでしょうが、それは私だけです。

簡単なプリロード手法は、背景画像が異なる複数のIDを宣言し、JavaScriptを使用してIDを動的に変更して、画像を表示することです。

$("#id-of-element").attr('id','preloaded-bg-div');
于 2012-09-23T01:34:37.883 に答える