0

たとえば、次のようなページにFAQのリストがあります。faq.html

<div id="faq1">...</div>
<div id="faq2">...</div>

DIVs特定の URL を介して訪問者を送信するときに、そのうちの 1 つを脈動させるか、単に強調表示したいと考えています。私のチェックアウトページに、 というリンクが"Find help here"あり、それは にリンクされているとし#faq2ます。

次のようにURLにトリガーを追加して、要素(pulsate/blink)のバックグラウンドで単純なハイライトアニメーションをトリガーするにはどうすればよいですか:FAQ Div

http://www.test.com/faq.html?highlight=faq2

4

4 に答える 4

5

URLにフラグメントを追加できる場合は、CSS:target疑似クラスを使用できます。

http://jsfiddle.net/9yNVp/

HTML：

<a href="#see" id="see">See</a> <a href="#works" id="works">works</a> <a href="#well" id="well">well</a>​

CSS：

a:target{
    transition:background-color 1s ease-in;
    -webkit-transition:background-color 1s ease-in;
    -moz-transition:background-color 1s ease-in;
    background-color: yellow;
}​
于 2012-08-31T06:51:09.073 に答える
0

それを強調するためにあなたはこれを行うことができます

var Blinkcnt = 0;
function BlinkDiv(DivId) {
    if (Blinkcnt % 2 == 0) {
        $('#' + DivId).animate({ backgroundColor: "#E1E1E1" }, 500);
        Blinkcnt += 1;
    }
    else {
        $('#' + DivId).animate({ backgroundColor: "#F8F8F8" }, 500);
        Blinkcnt += 1;
    }
    if (Blinkcnt < 10) {
        setTimeout(function () {
            BlinkDiv();
        }, 500);
    }
    else {
        Blinkcnt = 0;
        $('#' + DivId).animate({ backgroundColor: "#F8F8F8" }, 500);
    }
}
于 2012-08-31T06:52:11.290 に答える
0

:targetこれはCSSセレクターを使用して使用できます（faq2フラグメントがである場合にのみターゲットにするには#faq2、を使用しますfaq2:target { ... }）。

また、それをアニメーション化するには、CSS3トランジションとキーフレームを調べます。

于 2012-08-31T06:52:24.440 に答える
0 
$(function() {
    var params = window.location.href.split('?')[1].trim().split('&');
    var location = '';

    for( var i=0; i<params.length; i++ ) {
        var pair = params[i].split('=');
        location = pair[0] ==='highlight' ? pair[1] : '';
    }

    if ( location ) {
        $('#'+location).effect("highlight", {}, 3000);
        // or $('#'+location).effect("pulsate", { times:3 }, 2000);
    }
});

http://docs.jquery.com/UI/Effects/Highlight
http://docs.jquery.com/UI/Effects/Pulsate

于 2012-08-31T07:01:28.537 に答える