Jquery UI slide not working on certain elements

Question

Here I have a demo of Jquery slideToggle core working on an element, but jquery Slide UI not.

http://jsbin.com/obuha/edit

Please look at the demo, the Jquery UI button works for the above text, but not for the google logo. The slideToggle button works for the logo.

How would I get the Jquery UI slide to work with the logo as well?

Thanks.

And hopefully this can be done without changing the DOM.

Answer 1

I checked your code and I think the problem is because is the image is added an inline styled background of the span. This appears to be is messing up with slide effect.

However, this works fine if you apply the effect on the container DIV instead. See here: http://jsbin.com/aluwu

So, this works fine:

$('#container').effect("slide", {}, 1000);

Instead of this:

$('span.image').effect("slide", {}, 1000);