0

我有一个常见问题列表，例如，页面faq.html如下：

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

DIVs当我通过特定的 URL 将访问者发送到那里时，我现在想跳动或简单地突出其中一个。在我的结帐页面上说我有一个链接说它"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

您可以使用 CSS:target选择器来使用它（因此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 回答