jQueryで画像にマウスオーバーした際見出しをスライド表示するのデモページ

マスオーバー時にキャンプション表示

Javascript

$('.boxgrid.caption').hover(function(){
    $(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
}, function() {
    $(".cover", this).stop().animate({top:'265px'},{queue:false,duration:160});
});

CSS

.captionfull .boxcaption {
	top: 300px;
	left: 0;
}

マウスオーバー時に残りを表示

CSS Lectureに戻る

Javascript

$('.boxgrid.captionfull').hover(function(){
    $(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
}, function() {
    $(".cover", this).stop().animate({top:'350px'},{queue:false,duration:160});
});

CSS

.caption .boxcaption {
	top: 265px;
	left: 0;
}

マスオーバー時に右にスライド

CSS Lectureに戻る

Javascript

$('.boxgrid.slideright').hover(function(){
    $(".cover", this).stop().animate({left:'450px'},{queue:false,duration:300});
}, function() {
    $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
});

マスオーバー時に右下にスライド

CSS Lectureに戻る

Javascript

$('.boxgrid.thecombo').hover(function(){
    $(".cover", this).stop().animate({top:'300px', left:'450px'},{queue:false,duration:300});
}, function() {
    $(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});

マスオーバー時に上にスライド

マスオーバー時に上にスライド

CSS Lectureに戻る

Javascript

$('.boxgrid.slidedown').hover(function(){
    $(".cover", this).stop().animate({top:'-300px'},{queue:false,duration:300});
}, function() {
    $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
});

マスオーバー時に他の画像も表示

Javascript

$('.boxgrid.peek').hover(function(){
    $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
}, function() {
    $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});