jQueryで画像をフェードイン

Sponsored Link



2014-06-29_135400

プログラムコードをブログなどのWebページに掲載する場合に必要な処理や見た目を整えてくれる便利なライブラリ


記事の内容

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<img class="fadeimg" src="xxx.jpg" width="400" height="300" style="display: none;" />
<div class="fadebg" style="display: none; width: 400px; height: 300px; background-image: url(xxx.jpg); z-index: -1;"></div>

jQuery

$(function(){
$(".fadeimg").fadeIn(2000);
$(".fadebg").layer.css("background-image").fadeIn(2000); });
});

CSS3のみで実現する方法もあります。状況に応じて使い分けてください。

Sponsored Link

最新記事はトップページで!

京都発・地方が盛り上がるグルメや観光に撮影ロケ地の話題を提供!


購読するならRSSをご利用ください!

RSSはこちらをご利用ください。


マスコミ各社様の記事使用規約についてはこちらをご覧ください。

当ブログでは掲示板やSNSなど他メディアでURLや記事を紹介することはございませんので、掲示板などで記事を紹介されていても一切無関係です。誤解なきようお願いいたします。
当ブログで転載しているTweetはTwitter社の規約(2013/10)に準じた形式(API利用)によって許可された範囲で行われています。また、Tweet内容の所有権はTwitter社の規約によりTweet元のアカウント所有者にあります。そのため、当ブログでその所有権を主張するものではありません。Tweet内容については責任は負いませんので予めご了承ください。