透明度を少しづつ変更する fadeTo()

透明度を少しづつ変更する　fadeTo()

2015年8月3日

fadeTo()は、セレクターで指定した要素の
透明度(CSSのopacityプロパティ)を、設定した値にまで少しづつ
変更する命令です。括弧内には、スピード、透明度、コールバック関数を
指定します。透明度は０(非表示)～１(表示)の数値を指定できます。

fadeOut("slow")とfadeTo("slow",0)との違って

fadeOut("slow")は最終的に透明度を０にして、
displayプロパティを「none」にします。

fadeTo("slow",0)は、最終的にopacityプロパティの値を０に
するだけです。displayプロパティは「block」のままです。

実行結果はこちらです。
透明度をボタンを押すことにより変更します。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>
    <style>
	*{margin:0;padding:0;}
	
    #container{
        width:640px;
        height:400px;
        background-color:white;
        font-weight:100;
        margin:0 auto;}

    </style>        
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>
    <button id="fade100">表示</button>
    <button id="fade50">非表示</button>
    <button id="fade0">非表示</button>
    <p><img src="img/image3.jpg" alt="桜"></p>
<script>
$(function(){
    $("button#fade100").click(function(){
       $("img:not(:animated)").fadeTo("slow",1); 
    });
    $("button#fade50").click(function(){
       $("img:not(:animated)").fadeTo("slow",0.5); 
    });
    $("button#fade0").click(function(){
       $("img:not(:animated)").fadeTo("slow",0); 
    });
});
</script>

</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

background-color:white;

font-weight:100;

margin:0 auto;}

</style>

</head>

<body>

$(function(){

$("button#fade100").click(function(){

$("img:not(:animated)").fadeTo("slow",1);

});

$("button#fade50").click(function(){

$("img:not(:animated)").fadeTo("slow",0.5);

});

$("button#fade0").click(function(){

$("img:not(:animated)").fadeTo("slow",0);

});

</script>

</body>

</html>