QUIZGUM

Coding Class

Quizgum : fade in out effect

fade effect

We will divide the animation effect into three courses.

The function to use in the animation class is fadeIn(),fadeOut(),slideUp(),slideDown(), animate()

fadeIn(),fadeOut()

fade has a fade away and a slowly occurring function.

Let's look at the example results below.

show click!! hide click!!

fade is a feature that implements the function to make it disappear slowly and make it look like the above.

This is a very simple source that creates a show click, hide click button, and then clicks show click to fadeIn, and to hide fadeOut.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
    var ex_show = $('.ex_show');
    var ex_hide = $('.ex_hide');
    var ex_box = $('.ex_box');

    ex_show.click(function(){
        ex_box.fadeIn();
    });

    ex_hide.click(function(){
        ex_box.fadeOut();
    });
});
</script>
<style type="text/css">
.ex_show{float:left;margin-right:20px;cursor:pointer}
.ex_hide{float:left;cursor:pointer}
.ex_box{clear:both; float:left; width:100px; height:50px; background-color:yellow; border:1px solid skyblue; margin:50px; border-radius:10px}</style>
</head>
<body>
    <b class="ex_show">show click!!</b>
    <b class="ex_hide">hide click!!</b>
    <div class="ex_box"></div>
</body>
</html>

Control speed

You can control the time you see slowly and slowly to your liking.

fadeIn(1000), fadeOut(500), fadeIn('slow'), fadeOut('fast')

You can control the time by putting a number in parentheses. 1000 means 1 second.

So how do you express 0.5 seconds? Since 1000 is 1 second, half of 500 is 0.5 seconds.

It is possible to input after wrapping fast, slow in '' fast means 200 and slow means 400.

Seen slowly and disappears quickly
show click!! hide click!!

The time hidden as shown above can be set differently.

Please practice using the sources below.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
    var ex_show_3000 = $('.ex_show_3000');
    var ex_hide_fast = $('.ex_hide_fast');
    var ex_box_3f = $('.ex_box_3f');

    ex_show_3000.click(function(){
        ex_box_3f.fadeIn(3000);
    });

    ex_hide_fast.click(function(){
        ex_box_3f.fadeOut('fast');
    });
});
</script>
<style type="text/css">
.ex_show_3000{float:left;margin-right:20px;cursor:pointer}
.ex_hide_fast{float:left;cursor:pointer}
.ex_box_3f{clear:both; float:left; width:100px; height:50px; background-color:yellow; border:1px solid skyblue; margin:50px;border-radius:10px}
</style>
</head>
<body>
    <b class="ex_show_3000">show click!!</b>
    <b class="ex_hide_fast">hide click!!</b>
    <div class="ex_box_3f"></div>
</body>
</html>

done. let's look at slideUp() and slideDown().