jQuery stop fadeTo effect

Question

what I want is a sort of a mouse-trail effect, when you hover up or down the divs. But if you hover the mouse too fast a few times and then stop, the effect keeps repeating on it's own.

How can I solve this? I think I need some kind of a de-queue thing like with animate option, but for the fadeTo function. any ideas?

$(".test").mouseover(function(e) {
  $(this).fadeTo(200, 1);
}).mouseout(function(e) {
  $(this).fadeTo(200, 0.3);
});

.test {
  padding: 5px;
  width: 200px;
  color: #ffffff;
  font-weight: bold;
  background: #000000;
  opacity: 0.3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>

Answer 1

You can use the .stop method to stop previous animations. If you pass in true as an argument, it will also clear queued animations.

If I've understood what you're looking for correctly, then what you want is this (you said you want a "mouse trail", which I'm taking to mean you don't want the previous animation to stop as soon as the mouse leaves that element, hence only the one call to .stop):

$(".test").mouseover(function(e){
    $(this).stop(true).fadeTo(200,1);
}).mouseout(function(e){
    $(this).fadeTo(200,0.3);
});

You can see that running here.

Answer 2

Exactly as you described it in your title:)

$(".test").mouseover(function(e){
    $(this).stop().fadeTo(200,1);
}).mouseout(function(e){
    $(this).stop().fadeTo(200,0.3);
});