1
\$\begingroup\$

Background

When a user leaves a page, if they haven't submitted form data, a button is animated to draw the user's attention. (This is a poor UX choice--all the form data should be submitted--but it is what I have to work with at the moment).

Only the text, which is centered on the button, must wiggle: the button itself must not shake.

Problem

The solution entails adding a button, a div, and a span. Without these elements, the shaking does not seem to work as desired.

Code

Button code:

<button type="submit" id="accept-list" style="width:100%"><div style="display:inline-block;width:0 auto;margin:0;padding:0"><span>&#x2714;</span></div></button>

jQuery code:

$("#accept-list > div > span").effect( "shake", { distance: 5 } );

Fiddle

Question

What is a simpler way (i.e., that does not require the inner div and span elements) to shake button text, which works cross-browser?

\$\endgroup\$
1
\$\begingroup\$

I honestly don't know if this will work properly in all browsers (read: I doubt it), but you could conceivably animate the text-indent property to oscillate between +n and -n.

Here's a quick, quick hack based loosely on jQuery UI's own shake effect.

Again, though, I have no idea if this will work any better. It seems pretty neat, but I have a suspicion it won't be as robust as using a <button> with nested elements.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.