使用頻度の高いjQueryエフェクト 5選

使用頻度の高いjQueryエフェクトをφ(｀д´)ﾒﾓﾒﾓ...。


○ホバーアクションで画像の透明度を切り替える

$(function(){

   $("img.hover").hover(function () {
 　    $(this).fadeTo("slow", 0.6); // マウスオーバーで透明度を60%にする
   }, function () {
 　    $(this).fadeTo("fast", 1.0); // マウスアウトで透明度を100%に戻す 
   });

});


例）
<img class="hover">

透明度を0に設定すると、まるっきり画像が見えなくなります。
この画像の下に、もう一つ画像を重ねておくと、あら不思議…。
なんてのにも使えますね。



○ボタンクリックで隠れていたパネルがスライド開閉

$(function(){
    $(".btn").click(function(){
        $("#slide").slideToggle("slow");
    });
});


例）
<p class="btn">ボタン</p>
<div id="slide" style="display:none;"></div>

○div要素に指定したidへのページ内リンク

$(function(){
	$("a[href^=#]").click(function(){
		var Hash = $(this.hash);
		var HashOffset = $(Hash).offset().top;
		$("html,body").animate({
			scrollTop: HashOffset
		}, 1000);
		return false;
	});
});


例）
<div id="top"></div>
・
・
・
・
<a href="#top">▲[id="top"へ]▲




ちなみに、本家jQueryのプラグイン「PAGESCROLL」のコードはこれ。
アニメーションのカスタマイズもオッケーみたい。

$('a[href^="#"]').pageScroll({
                    offset: 100,
                    speed: 1400,
                    easing: 'easeInOutExpo',
                    event: 'mouseover',
                    onScrollStart: function(el) {
                        $('#scroll-indicator').fadeIn('fast');
                        $('h1').css('color', '#556');
                        $(el.attr('href')).css('color', 'royalblue');
                    },
                    onScrollFinish: function(el) {
                        $('#scroll-indicator').fadeOut('fast');
                    }
});

例）
<a href="#about">about us</a>
<h1 id="about">About us</h1>

offset().topをoffset().leftにしてscrollTopをscrollLeftにしたら、横にスライドするページも作れます。
ただ、これ系はやっぱりイベントをhoverやmouseoverではなくclickで実装したいな。。。
ダラダラと縦長のページを作っている皆様に実装していただきたいエフェクトです。
ランディングページ長すぎてカートボタンにたどり着けない！ってサイトを作っちゃってるアナタ。
みんながそれを読みたいと思っているわけではないので、こういうのを実装してあげてください。
自己満足のオ○ニーページはダメ、絶対！


○Div全体をクリックできるようにする

$(function(){
	$(".linkbox").click(function(){
    	window.location=$(this).find("a").attr("href");
    	return false;
    });
});


例）
<div class="linkbox">
    <a href="#">
</div>

スマホサイトなんかは特に、ボックス、ブロック単位でリンクを付けてくれないと指が太くて誤リンク多し…ｱﾎﾞｰﾝ(´・ｪ・｀)
なんてことにもなりかねないので、実装しておきたいところですよね。



○ツールチップ

$(function(){
	$(".tooltip a").hover(function() {
	    $(this).next("span").animate({opacity: "show"}, "slow");},
	    function() {
			$(this).next("span").animate({opacity: "hide"}, "fast");
	    }
	);
});


例）
<div class="tooltip">
    <a href="#">りんく</a>
    <span style="display:none;">ホバーでここが表示される</span>
</div>