15

私はこれで立ち往生していることに気づきました：

<a>内部の aを指すアンカー リンクがあるdivため、ページはそこまでスクロールします。

残念ながら、これdivはページの下部にあるため、ユーザーにはほとんど表示されません。

これを解決する良い方法は、リンクがクリックされたときに div のクラスを変更することです。たとえば、境界線の色を赤に切り替えてから、2 秒で通常の状態に戻ります。

これを行う方法がわかりません。私はグーグルで調べましたが、これはjQueryで実行できるようですが、スクリプトを自分のニーズに合わせて編集する方法が本当にわかりません.

どうもありがとう！

4

5 に答える 5

11

3 つの選択肢:

最初のもの - CSS3

すべてのブラウザをサポートする必要がない場合は、この方法を使用してください。これは純粋な CSS であるため、利点があります。概要は次のとおりです (複数のブラウザー用の複数のバージョンのルールが含まれます)。

.youranchorsclass:active ~ #yourdivsid { /*when the anchor is active (clicked)*/
   -moz-animation: myanimation 1s;
   -webkit-animation: myanimation 1s;
   -o-animation: myanimation 1s;
   animation: myanimation 1s;
}
@-moz-keyframes myanimation, @-webkit-keyframes myanimation, @-o-keyframes myanimation, @keyframes myanimation {
   from { background: red; }
   to { background: white; /*or whatever it was originally*/ }
}

(プレフィックス付きの醜いルールをすべて取り除きたい場合は、PrefixFreeを参照してください)。

2 つ目 - jQuery

古いブラウザのサポートが気になる場合は、これを使用してください。まず、これを に挿入して、ページに jQuery を含めますhead。

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type = "text/javascript"></script>

それで：

$(".yourlink").click(function() {
   $("#yourdivid").css("background", "red").delay(1000).css("background", "white");
};

この jQuery メソッドは色を徐々に変更しないことに注意してください。そうするには、プラグイン ( jQuery UIなど) を含める必要があります。

3 つ目 - 純粋な JavaScript

このような小さな効果のためだけに比較的巨大なライブラリを含めたくない場合は、これを使用してください。それは非常に簡単です。開始するためのコメント付きの概要を次に示します。

function changeDivColor(color) {
    document.getElementById("yourdivid").style.backgroundColor = color;
}
document.getElementById("youranchor").onClick = function() { //when the anchor is clicked
    changeDivColor("red"); //chang the div color to red
    setTimeout(function() { //wait 1000 milliseconds (1s) -- see below
        changeDivColor("white"); //then change it back to white
    }, 1000);
};

それが何らかの形で役立つことを願っています!

于 2012-10-07T17:28:06.113 に答える
10

はい、イエロー フェード トリックは 2 つの方法で実行できます。

:target疑似クラスの使用:

<section id="voters"> 
   Content
</section>

それぞれのCSS

:target {
   background: yellow;
}

イエロー フェード テクニックの使用

クリック機能では、もしあれば、次のようにすることができます：

$('a[href*="#"]').click(function(){
    $($(this).attr("href")).effect("highlight", {}, 1500);
});

または使用animate()：

$('a[href*="#"]').click(function(){
    $($(this).attr("href")).animate({"background-color": "#ffc"}).delay(2000).animate({"background-color": "transparent"});
});

フィドル: http://jsfiddle.net/HnERh/

PS:を使用 effect()するには、次の 2 つの JS: effects.core.js とが必要 effects.highlight.jsです。

于 2012-10-07T17:23:06.093 に答える
2

クリックすると、div の色が red に変更され、.css({ elements })2 秒待っ.delay( time ) て元の色に戻るアニメーションが表示されます.animate({ elements }, time, callback)

$(document).ready() {
    $('a[href^="#"]').click(function(){
        $('div.divs_class_or_id_name').css('border','solid 1px #ff0000').delay(2000).animate({
            border: 'solid 1px #000000'
        }, 500, function() {
            // animation complete
        });
    });
};
于 2012-10-07T17:26:39.557 に答える
1

次のようなもの。

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#element").offset().top
    }, 2000);
    $("#element").animate({
        "background-color": "#FFFFCC"
    }).delay(2000).animate({
        "background-color": "#00FFFF" //original background color
    });
});

http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.jsなど、色のアニメーションを可能にする jquery プラグインを必ず含めてください。

@praveen-kumar の:target解決策は良さそうに見えますが、css3 アニメーションだけで解決できると思います。

于 2012-10-07T17:23:38.327 に答える