jQuery toggle() 表示, 非表示を繰り返す

toggle()

表示、非表示を繰り返す

jQuery

<script>
$(".btn").click(function(){
	$(".box1").toggle(1000, 'linear');
});
</script>

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>

<style>

.box {

}
	
.box1 {
	width: 150px;
	height: 150px;
	background-color: cornflowerblue;
	display: block;
}
	
.btn{
    display: inline-block;
    text-decoration: none;
    background: #87befd;
    color: #FFF;
    width: 120px;
    height: 120px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: 0px 0px 0px 5px #87befd;
    border: dashed 1px #FFF;
    transition: .4s;
	margin-top: 100px;
}

.btn:hover{
    background: #668ad8;
     box-shadow: 0px 0px 0px 5px #668ad8;
}

</style>

</head>

<body>

<span class="box1"></span>


<a href="#" class="btn">BUTTON</a>
	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(".btn").click(function(){
	$(".box1").toggle(1000, 'linear');
});
</script>
</body>
</html>

DEMO