2009年8月15日土曜日

[jQuery] 要素をアニメーションでスライドさせる方法


以前jQuery Gallery Pluginを作った時に、要素をアニメーションでスライドさせるのに手こずった覚えがあります。

Sliding door effect with JQuery
http://tutsvalley.com/wp/tutorials/sliding-door-effect-with-jquery/

» デモ

こちらはHTML,CSS,Javascript(jQuery)ともソースの全文が載っているチュートリアルです。

アニメーションで要素をスライドさせるためのポイントが非常にシンプルにまとめられています。

一番のキモはCSSかもしれません。
コンテナと画像のpositionをそれぞれ下記のように記述するのは、慣れていないと気づきにくいのではないでしょか。

.box_container{  
position: relative;
}
.box_image{
position: absolute;
}


Javascriptの記述は本当に少なくてすみます。jQuery様々ですね。
// 横スライド
$(document).ready(function() {
$('.box_container').hover(function(){
var width = $(this).outerWidth();
$(this).find('.box_image').animate({left: width}, {queue:false, duration:300});
}, function(){
$(this).find('.box_image').animate({left: '0px'}, {queue:false, duration:300});
});
});


※ セレクタの書き方がちょい引っかかります » 参考

3 件のコメント:

sin さんのコメント...

はじめまして。。
ふぉと蔵から来ましたzenですが・・
こちらの内容の方でたまに気になって読んでいました。

HPの壁紙画像をさりげなくヨコにスライドさせたりしたかったのですが、javascriptをどのように入れたらいいのか、読んでいても全く理解できない私ですが、教えて頂けるコトは出来ますでしょうか・・?

Youthhr さんのコメント...

コメントありがとうございます。

Googleで"jQueryプラグイン 背景画像"と検索すると色々使えそうなプラグインが見つかると思います。

jQuery?プラグイン?なんのこっちゃ、というのならこのさい頑張って覚えちゃいましょう。
コツさえつかめば簡単ですし、とっても便利ですよ!

sin さんのコメント...

Youthhrさん、ありがとうございます。
本当に難しそうです。
参考にさせて頂きます。