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

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

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

CSS Lectureに戻る

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});
});

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

RSS
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});
});
Copyright (c) 2009 CSS Lecture All rights reserved.