Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What is going on with this article?
@t-ohtake

javascriptで画像をフェードインする方法

More than 5 years have passed since last update.

javascriptで画像をフェードインする方法

Webアプリで画像をフェードインしたい時がありjavascriptを使用して実装してみたのでメモ。
(探せばもっとよい方法があるかも。。)

正しく言えば、フェードインっぽく画像を表示しているだけ。

■実装方法

以下をheadタグの中に記述する

<script type="text/javascript">
    <!--
        opa=0; //透明度 0は透明
        opacnt=3; //透明度の増減の間隔
        timer=100; //setTimeout関数の実行間隔 ミリ秒

        // フェードイン
        function FadeInstr()
        {
            gazouId = "gazou1";
            MyIMG = document.getElementById(gazouId);
            MyIMG.style.visibility = "visible";
            FadeIn1(gazouId,opa);
        }
        //透明度を増加していきます。
        function FadeIn1(gazouId,opa)
        {
            if (opa <= 100)
            {
                MyIMG.style.filter = "alpha(opacity:"+opa+")"; // IE のソース
                MyIMG.style.opacity = opa/100; //Mozilla Firefoxのソース
                opa += opacnt;
                setTimeout("FadeIn1('"+gazouId+"',"+opa+")", timer);
            }
        }

    //-->
</script>

bodyタグの中に以下を記述。


<IMG src="画像を指定" id="gazou1" name="gazou1" style="visibility : hidden;" onload="FadeInstr()">

上記の記述により画像の透過度が減少し画像がフェードインして見える。

以上、参考まで。


簡単家計簿 Androidアプリ

17
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
t-ohtake
暑いのが嫌いです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
17
Help us understand the problem. What is going on with this article?