Reputation: 49
I have this code made to shuffle characters randomly and create an hover effect. I'm using it for a navigation. But it appears that my code works only for a single class and when I put multiple classes it breaks everything and generate a shuffle for everything at the same time, indefinitly ....
BEWARE : use the snippet with caution it can make your navigator crashed...
// Shuffle
jQuery(function($) {
function text_shuffle() {
"use strict";
var counter = 0, all = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789*?><[]&@#)(.%$-_:/;?!";
$_inter = setInterval(function() {
var text = $(".text-shuffle").text();
text = text.substring(0, counter) + all.charAt(Math.floor(Math.random()*all.length)) + text.substring(counter+1);
$(".text-shuffle").text(text);
counter = (counter+1)%text.length;
}, 150);
}
var value, $_inter;
$(".text-shuffle").mouseenter( function(){
value = $(this).html();
text_shuffle();
}).
mouseout(function(){
clearInterval($_inter);
$(this).html(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="text-shuffle">Title 1</div>
<div class="text-shuffle">Title 2</div>
<div class="text-shuffle">Title 3</div>
Upvotes: 1
Views: 33
Reputation: 2629
If you pass the current element to the function, you can limit the scope like this:
// Shuffle
jQuery(function($) {
function text_shuffle($element) {
"use strict";
var counter = 0, all = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789*?><[]&@#)(.%$-_:/;?!";
$_inter = setInterval(function() {
var text = $element.text();
text = text.substring(0, counter) + all.charAt(Math.floor(Math.random()*all.length)) + text.substring(counter+1);
$element.text(text);
counter = (counter+1)%text.length;
}, 150);
}
var value, $_inter;
$(".text-shuffle").mouseenter( function(){
value = $(this).html();
text_shuffle($(this));
}).
mouseout(function(){
clearInterval($_inter);
$(this).html(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="text-shuffle">Title 1</div>
<div class="text-shuffle">Title 2</div>
<div class="text-shuffle">Title 3</div>
Upvotes: 4