How can I get original condition after clicking in a specific letter?

user_12501851 0
Viewed 51

This is the code:

$(document).ready(function() {
  $('div').html(function(i, html) {
    var chars = $.trim(html).split("");
    return '<span>' + chars.join('</span><span>') + '</span>';
  });
  $('div').click(function() {
    $('span').each(function() {
      $(this).css({
        "position": "absolute"
      });
      $(this).animate({
        left: Math.random() * window.outerWidth / 2,
        top: Math.random() * window.outerHeight / 2,
      });
    });
  });
});
html,
body {
  width: 100%;
  height: 100%;
}

div {
  font-family: Arial;
  font-size: 9vw;
  text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>Stack Overflow</div>

If you click the word, the letters should all get a random position. Now: If you click any of the letters, it should look like before. So it should work like a toggle function.

jquery javascript
2 Answers

Add a flag to check if need to random chars, and then reset position to relative, left & top to 0.

$(document).ready(function() {
  var isRandom = false;
  $('div').html(function(i, html) {
    var chars = $.trim(html).split("");
    return '<span>' + chars.join('</span><span>') + '</span>';
  });
  $('div').click(function() {
    isRandom = !isRandom;
    if(isRandom) {
    $('span').each(function() {
      $(this).css({
        "position": "absolute"
      });
      $(this).animate({
        left: Math.random() * window.outerWidth / 2,
        top: Math.random() * window.outerHeight / 2,
      });
    });
    } else {
     $('span').each(function() {
      $(this).css({
        "position": "relative"
      });
      $(this).animate({
        left: 0,
        top: 0,
      });
    });
    }
    
  });
});
html,
body {
  width: 100%;
  height: 100%;
}

div {
  font-family: Arial;
  font-size: 9vw;
  text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>Stack Overflow</div>

user_33223180

You simply need to remove css which is added to span using $(this).find("span").css({ "left": "",..}) and add some class to identify current state of text.

Demo code : 

$(document).ready(function() {
  $('div').html(function(i, html) {
    var chars = $.trim(html).split("");
    return '<span>' + chars.join('</span><span>') + '</span>';
  });

  $('div').click(function() {
    if ($(this).hasClass("already")) {
      //remove css added to span
      $(this).find("span").css({
        "left": "",
        "top": "",
        "position": ""
      });
      //remove already class
      $(this).removeClass("already")
    } else {
      //add class to identify 
      $(this).addClass("already")
      $('span').each(function() {
        $(this).css({
          "position": "absolute"
        });
        $(this).animate({
          left: Math.random() * window.outerWidth / 2,
          top: Math.random() * window.outerHeight / 2,
        });
      });

    }
  });
});
html,
body {
  width: 100%;
  height: 100%;
}

div {
  font-family: Arial;
  font-size: 9vw;
  text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>Stack Overflow</div>

user_106064000
Related