Databases
StackOverflow2013
Postsdbo
POJquery animation - animating text shadow css on hover to achieve a slow effect from a blurred to a crisp text
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery animation - animating text shadow css on hover to achieve a slow effect from a blurred to a crisp text
    primarykey
    data
    text
    <p>The title says all but I'll be more specific and detailed. It's 3 weeks that I'm trying to achieve this effect but it's not so easy as it sounds, and it starts to be frustrating.</p> <p>I want animate text shadow on hover to achieve a slow effect from a blurred to a crisp text.</p> <p>So, I want to animate the text shadow property of css with the jquery animate() function; I'd like to have it blurred when your enter the page; for instance like</p> <p>//css</p> <pre><code>.blur{color: transparent; text-shadow: 0px 0px 40px #000} </code></pre> <p>so with css would be easy to have it crisp on hover;</p> <p>//css</p> <pre><code>.blur:hover{color: transparent; text-shadow: 0px 0px 0px #000} </code></pre> <p>but how can it make it slowing go to blur to crisp ?</p> <p>I've found many examples on the web, but none is working like i want. Now this is the actual code I'm using.</p> <pre><code>$(document).ready(function() { $.fx.step.textShadowBlur = function(fx){ $(fx.elem).css({'text-shadow': '0px 0px' + Math.floor(fx.now) + 'px #000'}); }; $('.blur').hover(function(){ $(this).animate({ textShadowBlur: '10px'}, console.log('antani'), 1000); }); }); </code></pre> <p>I've created a virtual property of the css because I know that jquery doesnt support text shadow has it is a multiple variable property.</p> <p>I've also tried jquery css hook by Brian Aaron that can be found here:</p> <p><a href="https://github.com/brandonaaron/jquery-cssHooks/blob/master/textshadow.js" rel="nofollow">https://github.com/brandonaaron/jquery-cssHooks/blob/master/textshadow.js</a></p> <p>no luck.</p> <p>Please help me if you can :)</p> <p>Thanks in advance.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USNaveed Ahmad
    1. USuser3690586
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJquery animation - animating text shadow css on hover to achieve a slow effect from a blurred to a crisp text
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    2. VO
      singulars
      1. POJquery animation - animating text shadow css on hover to achieve a slow effect from a blurred to a crisp text
      1. USVbiz Solutions
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload