画像に付けたボーダーをアニメーション化する『InsetBorder』の動作を逆にする[javascript]
画像に付けたボーダーをマウスオーバーでアニメーションで消してくれる『InsetBorder』というjqueryプラグインですが、動作逆の方がよくない!?ってことで画像にマウスオーバーしたらアニメーションでボーダーが表示されるようにカスタマイズ。
まえがき
『InsetBorder』というjqueryプラグインは画像に付けたボーダーをマウスオーバー時にアニメーションで消してくれるというものです。
言葉じゃ伝わりません。公式サイトのデモをご覧下さい。
だんだんボーダーを消してくれるのですが、これ逆の方がよくないですか?
画像をマウスオーバーしたらボーダーがだんだん表示されるって動きのほうがよくないですか??
いいですよね!
『InsetBorder』を誰かがカスタマイズしたっぽいのを見つけたのでちょっといじって公開します。
解説とかいらないからデモ見せろって人は下からどうぞ!
公式サイトのデモの流用でごめんなさい笑
『InsetBorder』のjquery.insetBorderEffect.jsを変更する
『InsetBorder』の使用方法は公式サイトを参照してください。
「jquery.insetBorderEffect.js」というファイルをHTMLに読み込みますが、そのコードを下記に変更します。
/* Author: Robin Thrift You are free to use this plug in in any way you want non-commercially and commercially. However if you redistribute (even when altered by you) you have to give credit to me. How you give me credit is up to you. Here are two links you could link off to: http://www.twitter.com/r0bs3n http://rob-thrift.com And now have FUN! Alerations by: Chris Coyier */ // allows for use of $ without conflict worries (function($) { $.fn.insetBorder = function(options) { if ((options!=undefined) && (options.inset!=undefined)) { if (options.plusnum==undefined) { options.plusnum = options.inset; } if (options.plusnum==undefined) { options.plusnum = options.inset; } if (options.plusnum==undefined) { options.plusnum = options.inset; } if (options.plusnum==undefined) { options.plusnum = options.inset; } } // defaults options = $.extend({ speed : 250, plusnum : 7, zero : 0, borderType: "solid" }, options); // run plugin on entire jQuery set return this.each(function(i) { var $el = $(this), ibe_height = $el.outerHeight(), ibe_width = $el.outerWidth(); var wrapper = $("<div />", { "class": options.outerClass, "css" : { "width": ibe_width, "height": ibe_height, "overflow": "hidden", "float": "left", "top": 0, "left": 0, "position": "relative" }, "mouseenter": function() { $el .next() .animate({ "top": options.zero + "px", "left": options.zero + "px", "height": ibe_height - options.plusnum*2 +"px", "width": ibe_width - options.plusnum*2 +"px", "opacity": 1 }, { "duration": options.speed, "queue": false, "complete": function() { // BUG: for some reason this is getting called twice. // Kinda works... attempt at allowing selectability of main element // The problem is this only fires on complete but must make visibile on mouseleave no matter what // $el.next().css("visibility", "hidden"); } }); // on mouseleave }, "mouseleave": function() { $el .next() // .css({ // "visibility": "visible" // }) .animate({ "top": "-" + options.plusnum*2 +"px", "left": "-" + options.plusnum*2 +"px", "height": (ibe_height + (options.plusnum + options.plusnum)) + "px", "width": (ibe_width + (options.plusnum + options.plusnum)) + "px", "opacity": 0 }, { "duration": options.speed, "queue": false }); } }), after = $("<div />", { "class": options.innerClass, "css" : { "height": (ibe_height + (options.plusnum)) + "px", "width": (ibe_width + (options.plusnum)) + "px", "border-left": options.plusnum + "px " + options.borderType, "border-right": options.plusnum + "px " + options.borderType, "border-top": options.plusnum + "px " + options.borderType, "border-bottom": options.plusnum + "px " + options.borderType, "position": "absolute", "top": "-" + (options.plusnum*1.5) + "px", "left": "-" + (options.plusnum*1.5) + "px" } }); $el.wrap(wrapper).after(after); }); }; })(jQuery);
「plusnum」にボーダーの大きさを設定して基準としています。
ボーダーの大きさとアニメーションのスピードは31,32行目で変更できます。
speed : 250, plusnum : 7,
ボーダーの色はjsではなくcssで変更します。
ボーダーを表示する画像の親要素(親要素なら何階層上でもいい)に「color」を指定します。
KoToRiのデモを例に挙げます。
<ul> <li style="color:#ff9900;"></li> <li><img class="hover_img_default" src="img/stockpic2.jpg" alt="text" /></li> <li><img class="hover_img_default" src="img/stockpic3.jpg" alt="text" /></li> </ul>
これで一番上の「stockpic1.jpg」のボーダーの色は「#ff9900」になります。
この例はインラインスタイルで指定してありますが、もちろん外部のcssに記述してOKです。
てかそうしてください笑
まとめ
よく分からなかったり正常に動かない人はKoToRiのデモをご覧下さい。
このプラグインは地味に愛用してます。
画像マウスオーバー時にちょっとこういう動きが入るだけでもサイトの印象が変わってきますよね。
こういう細かい気遣いが大事なのですよね。
これからも細かい気遣いを大切にめんどくさがらずにあくなき探究心でWebに情熱を注いでいきたいものです。
『InsetBorder』や『逆InsetBorder(勝手に命名)』使用したことない人は次の機会に検討してみてください。