0

http://www.lifechurch.org.uk/new-here/about/ http://www.lifechurch.org.uk/media/blog/

これに似たリンク効果を作りたい

私は以下を見つけました：

$(document).ready(function() {
$("#button").click(function(){
$(".target").effect( "bounce", 
{times:3}, 300 );
});
});​

ライブラリを使用していると言われましたが、これをどこから入手できるのでしょうか?

ありがとうカースティ

アップデート

バウンスしたいクラスでリンクをラッピングしてみた

<!doctype html>
<html>
<head><title>jQuery example</title></head>
<body>
<a href="#" id="button">Click me</a>
<div class="target">I will bounce</div>
<div class="target">I will bounce too, since I have the same class name</div>
<br>
<br>
<br>
<a href="#" id="button"><div class="target">Click me</div></a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script>
    $(document).ready(function() {
            // Notice the .on instead of .click, it's the new style for events
            // in jQuery and the e argument
            $("#button").on('click', function (e) {
                e.preventDefault();
                $(".target").effect( "bounce", { times : 3 }, 300);
            });
        });
    </script>
</body>

そして、それは矛盾していますか。再作成したい上記の例を見たかどうかはわかりません。しかし、リンクである H1 ヘッダーはわずかに「バウンス」またはインデントされています。これは、Wordpress ブログのリンク ヘッダーで再現したい効果です。

ありがとう

4

3 に答える 3

1

このコードは、非常に一般的なJavaScriptライブラリであるJQuery（ http://www.jquery.com ）を使用しています。

「バウンス」効果は、JQueryUIという名前のJQueryへのオプションのアドオンの一部です。http：//api.jqueryui.com/bounce-effect/を参照してください。

編集：Kirsty、JavaScriptとJQueryについて学びたい場合は、http：//www.codecademy.comに両方のテーマに関する優れた無料のインタラクティブクラスがいくつかあります。

于 2012-12-07T09:20:17.500 に答える
1

次の行を HTML ドキュメントに追加します: (他のスクリプトの前)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

その後：

$(document).ready(function() {
    // Notice the .on instead of .click, it's the new style for events
    // in jQuery and the e argument
    $("#button").on('click', function (e) {
        e.preventDefault();
        $(".target").effect( "bounce", { times : 3 }, 300);
    });
});​

いくつかのサンプル HTML:

 <a href="#" id="button" class="target">Click me</a>

そして、動作中の jsFiddle を次に示します: http://jsfiddle.net/fredrik/g8J3y/ ..fredrik

于 2012-12-07T09:23:01.617 に答える
1

.effect は jquery-ui の一部です

エフェクトのみのカスタム min-js をダウンロードします。

http://jqueryui.com/download/

于 2012-12-07T09:27:56.807 に答える