я два вопроса.

Почему анимация, которая делает буквы случайно исчезающими, не имеет одинаковую скорость для всех букв? Анимация не плавная.

Как сделать так, чтобы анимация работала на противоположной стороне? Когда я скрываю div с помощью .hide () и пытаюсь сделать его прозрачным, это не сработает. Я уже пробовал другое решение, но на самом деле ничто не заставляет div появляться.

Код:

function wow1 () {

	var mail1 = $(".mailFirst h2");
	var letters = mail1.children();

	setInterval(function() {
		letters.eq(Math.random()*letters.length |0).animate({opacity:0},500);
	},500);
}

$(document).ready(wow1);

.mailFirst	{position: absolute;
			       top: 0;
			       left: 0;
			       color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mailFirst">
  <h2> 
    <span> @ </span>
    <span> E </span>
    <span> - </span>
    <span> M </span>
    <span> a </span>
    <span> i </span>
    <span> l </span>
    <span> @ </span>
  </h2>
</div>