CODEWITHSUNDEEP
jquerycssjquery-ui
Charlie Wu
Charlie Wu

Reputation: 7757

How to apply css style to jquery effect

I have a page which contains a list. I have a button to add a new item to the list. I want to apply JQuery-UI effect to the adding of new item, my problem is when the effect animation is shown, the list item is not styled. See this fiddle - http://jsfiddle.net/Ec3x9/2/.

You can see that when the user clicks on the create button, the animation of the item is displayed, but the list item text is under the icon since the CSS is not applied. I want to show the animation of the list item. How do i do that?

Upvotes: 0

Views: 124

Answers (2)

sarcastyx
sarcastyx

Reputation: 2219

It looks like the styles don't work properly in IE 7. In FF and Chrome the text is displayed next to the image icon. For IE you can remove the line-height or set it to 0 and it should work.

Give that a go and see if it fixes your problem. However, that will break the styles for FF and Chrome. So you will have to add some smarts to make the design work for IE 7 and Chrome/FF.

Upvotes: 0

tterrace
tterrace

Reputation: 1985

Remove the > character between ul and li in your CSS declarations. What jquery does is wrap your li with a div element before it does the animations. When that happens, the li isn't a direct descendent of ul anymore so your styles aren't being applied during the animation.

Ex: http://jsfiddle.net/Ec3x9/8/

Upvotes: 1

Related Questions