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!
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
- <script>
- $(document).ready(function(){
- $("#blur01").click(function() {
- $(this).animate({ backgroundColor: '#999999', textShadow: '0 0 15px #000', color: 'transparent' }, 2000);
- });
-
-
- $("#blur02").click(function() {
- $(this).addClass('blur', 2000);
- });
-
-
- $("#blur03").toggle(function() {
- $(this).animate({ textShadow: "0 0 15px #000", color: "transparent", backgroundColor: "#999999"}, 2000);
- },function() {
- $(this).animate({ textShadow: "0 0 15px #F00", color: "transparent", backgroundColor: "#999999"}, 2000);
- });
- });
- </script>
- <style>
- div {font-size:30px; margin:5px; padding:5px;}
- .blur {text-shadow:0 0 15px #000; color:transparent; background:#999999;}
- </style>
- <div id="blur01">Text Blur 01 - click</div>
- <div id="blur02">Text Blur 02 - click</div>
- <div id="blur03">Text Blur 03 - toggle</div>