note

参照URL：http://nanapi.co.jp/blog/2014/07/16/gif_animation_tips/

フェード・輝き・横スライド・縦スライド・・・・などたくさんやり方が丁寧に書いてあるよ。

参照URL
http://www.webantena.net/javascriptjquery/plugin-jquery-yurayura/
http://2inc.org/blog/2011/07/05/745/

■jquery.yurayura.js

jQuery( function( $ ) {

    $.fn.yurayura = function( config ) {

        var obj = this;

        var i = 0;

        var defaults = {

            'move' : 5,         // 動く量

            'duration' : 1000,  // 移動にかける時間

            'delay' : 0         // 両端で停止する時間

        };

        var setting = $.extend( defaults, config );

        return obj.each( function() {

            ( function move() {

                i = i > 0 ? -1 : 1;

                var p = obj.position().top;

                $( obj )

                    .delay( setting.delay )

                    .animate( { top : p + i * setting.move }, {

                        duration : setting.duration,

                        complete : move

                    } );

            } )();

        } );

    };

コリスより
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-buttons-with-bound-effect.html

<script type="text/javascript">

$(document).ready(function(){

$(".button").hover(function(){

$(".button img")

.animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump

.animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump

.animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // the last jump

});

});

</script>

参照URL:http://www.1uphp.com/con1/img/linkborder.html

画像にリンクした場合の枠線を非表示にする場合には、画像の<img>にborder="0"を使用する事で、枠線を非表示にできます。

<a href="リンク先">

<img src="画像" width="サイズ" height="サイズ" alt="" border="0">

</a>