Как вернуть первоначальный внутренний текст на MouseLeave?

голоса
1

Я хотел бы, чтобы рандомизировать символы на парении для определенного идентификатора. Он отлично работает на мыши войти, но не может заставить его остановиться и вернуться к исходному тексту, когда отпуск мыши.

Вот код.

jQuery(function($) {
function text_shuffle() {
    use strict;
    var counter = 0, all = ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789;
    var $_inter = setInterval(function() {
        var text = document.getElementById(text-shuffle);
        text.innerHTML = text.innerHTML.substring(0, counter) + all.charAt(Math.floor(Math.random()*all.length)) + text.innerHTML.substring(counter+1);
        counter = (counter+1)%text.innerHTML.length;
    }, 100);
}
$(#text-shuffle).mouseenter(text_shuffle);
});
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<div id=text-shuffle>Home</div>

Спасибо за вашу помощь

Задан 11/03/2017 в 17:48
источник пользователем
На других языках...                            


3 ответов

голоса
1

Вы должны очистить свой интервал на MouseLeave. Вы не вызвали функцию MouseLeave поэтому код шифрует символов внутри DIV на неопределенный срок.

Все, что я сделал был установлен интервал в переменной и очистить переменную на MouseLeave.

jQuery(function($) {
  all = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  var int;
  var counter = 0;
  
  function textShuffle() {
    var text = document.getElementById("text-shuffle");
    text.innerHTML = text.innerHTML.substring(0, counter) + all.charAt(Math.floor(Math.random()*all.length)) + text.innerHTML.substring(counter+1);
    counter = (counter+1)%text.innerHTML.length;
  }
  
  $("#text-shuffle").hover(function() {
     int = setInterval(textShuffle, 100);
    }, function () {
      clearInterval(int);
      document.getElementById("text-shuffle").innerText = "Home";
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="text-shuffle">Home</div>

Ответил 11/03/2017 в 17:58
источник пользователем

голоса
1

Используйте , clearIntervalчтобы остановить Рандомайз символов, замените исходный текст , когда мышь выходит из текста.

jQuery(function($) {
function text_shuffle() {
    "use strict";
    var counter = 0, all = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
     $_inter = setInterval(function() {
        var text = document.getElementById("text-shuffle");
        text.innerHTML = text.innerHTML.substring(0, counter) + all.charAt(Math.floor(Math.random()*all.length)) + text.innerHTML.substring(counter+1);
        counter = (counter+1)%text.innerHTML.length;
    }, 100);
}
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 id="text-shuffle">Home</div>

Ответил 11/03/2017 в 18:04
источник пользователем

голоса
1
(function(){

'use strict';

var all  = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
    elem = document.getElementById("text-shuffle"),
    orig = elem.innerHTML;

var $_inter;
function text_shuffle()
{ 
    var counter = 0;
    $_inter = setInterval( function()
    {
        elem.innerHTML = elem.innerHTML.substring(0, counter) + all.charAt(( Math.random() * all.length ) | 0 ) + elem.innerHTML.substring(counter + 1);
        counter = (counter+1) % elem.innerHTML.length;
    }, 100);
}

function clear() { clearInterval( $_inter ); elem.innerHTML = orig };

$("#text-shuffle").hover( text_shuffle, clear )

}())
Ответил 11/03/2017 в 18:09
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more