kaeru-kanaのブックマーク / 2016年2月25日

kaeru-kana id:kaeru-kana

2016年2月25日のブックマーク (2件)

.animate()で動かす（横幅・縦幅編） - jQuery syntax
.animate()でwidthやheightを変更してみましょう。 $(document).ready(function(){ $("#sample").css({width:0}); $("#sample").animate({width:"500px"},1000,"easeInOutExpo"); });こう書くことで#sampleの横幅を1000ミリ秒で500pxまで伸ばすアニメーションが出来上がります。これだけだと何が何やらという感じですが、 <div id="sample"> <p>これはサンプルテキストです。</p> </div>このようなHTMLで #sample { overflow: hidden; width: 0; background: #c00; color: #fff; }CSSをこのようにして $(document).ready(function(){
kaeru-kana 2016/02/25
これはすぐ試せそう！チェック(´▽`*) .animate()で動かす（横幅・縦幅編）
リンク
.hover()でマウスオーバー - jQuery syntax
マウスオーバーすると変化する…かなりよく使うものだと思います。.hover()のご紹介です。 $(document).ready(function(){ $("#sample").css({position:"absolute",top:0}); //hover $("#sample").hover(function(){ $(this).animate({top:"100px"},200,"easeInOutQuint"); //オーバー時 },function(){ $(this).animate({top:0},200,"easeInOutQuint"); //アウト時 }); });.hover()は「ロールオーバーした時」「ロールアウトした時」をあわせて書くことが多いです。ほとんどの場合、ロールアウトした時は変化した値を元に戻す命令を書くことでしょう。いくつか補足説明があります
kaeru-kana 2016/02/25
いつかこれ使いたいなぁ( ˘ω˘ ) .hover()でマウスオーバー
リンク
- 2016年2月29日
- 2016年2月25日
- 2016年2月24日