Animated (blurry text) text-shadow problem!

Animated (blurry text) text-shadow problem!

I'm trying to slowly blur text but I'm running into a problem where color:transparent text is applied before text-shadow. I need it to apply at the same time.

If it isn't apparent by the example, I'm using text-shadow to blur the text out to be unreadable, I'm not trying to add a simple text shadow. I need this to a slow animation. If there's a better way to do it, please let me know. I realize you can select the text and continue reading, but I'm not trying to block access to the text, I just need the blur effect.

Below is a full working version of my code.
I might be using the wrong version(s) of jQuery, but these are the versions I've found to work the best with what I'm trying to do.

Thanks in advance!

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  2. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  3. <script>
  4. $(document).ready(function(){

  5. $("#blur01").click(function() {
  6. $(this).animate({ backgroundColor: '#999999', textShadow: '0 0 15px #000', color: 'transparent' }, 2000);
  7. });
  8. $("#blur02").click(function() {
  9. $(this).addClass('blur', 2000);
  10. });
  11. $("#blur03").toggle(function() {
  12. $(this).animate({ textShadow: "0 0 15px #000", color: "transparent", backgroundColor: "#999999"}, 2000);
  13. },function() {
  14. $(this).animate({ textShadow: "0 0 15px #F00", color: "transparent", backgroundColor: "#999999"}, 2000);
  15. });

  16. });
  17. </script>

  18. <style>
  19. div {font-size:30px; margin:5px; padding:5px;}
  20. .blur {text-shadow:0 0 15px #000; color:transparent; background:#999999;}
  21. </style>

  22. <div id="blur01">Text Blur 01 - click</div>
  23. <div id="blur02">Text Blur 02 - click</div>
  24. <div id="blur03">Text Blur 03 - toggle</div>