Question

I am looking to apply a jquery ui like highlight effect to an element , but I am using jquery mobile. Is there anything built into jquery mobile that would allow me to do that, without referencing any of the jquery ui stuff ?

Thanks

Answer 1

Would something like this work?

NOTE: this might affect the hash navigation but it’s all CSS

• http://jsfiddle.net/MEzAU/

CSS

:target {
    -webkit-animation: target-fade 3s 1;
    -moz-animation: target-fade 3s 1;
}

@-webkit-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}
@-moz-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}

HTML

<a href="#1">Link 1</a>
<a href="#2">Link 2</a>
<a href="#3">Link 3</a>
<p id="1">Paragraph 1</p>
<p id="2">Paragraph 2</p>
<p id="3">Paragraph 3</p>

Link reference:

• http://snook.ca/archives/html_and_css/yellow-fade-technique-css-animations