Does anyone know why I am unable to smoothly rotate the icon? Any help would be greatly appreciated!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<!-- style -->
<style media="screen">
div{
background:red;
width:20px;
height:60px;
}
.rB {
transform: rotate(180deg);
transition: all 2s linear;
}
</style>
</head>
<body>
<button id="button" type="button" name="button">Rotate</button>
<i class="fab fa-twitter"></i>
<div></div>
<!-- script -->
<script>
$(function(){
$("#button").on('click', function(){
$(this).siblings().toggleClass('rB');
});
});
</script>
</body>
</html>I have inserted a new div https://codepen.io/SalahGfx/pen/yvJqVO