jquery safari opacity only

#div1{ 
filter:alpha(opacity=85); 
-moz-opacity:0.85; 
-khtml-opacity:0.85; 
opacity: 0.85;
}

#div1:hover{ 
filter:alpha(opacity=100); 
-moz-opacity:1; 
-khtml-opacity:1; 
opacity: 1;
}

html>#div1.safarihack{
opacity: 1; 
}

All the above does as intended. Safari always has its opacity set to full because it doesnt render properly if not. However, i also have a jquery event that when this div is clicked, the opacity fades to 0, and i need it to fade to 0 for all browsers (fadeout is not an option).

The html of the div is then changed, and i need the opacity for all browsers to return to 0.85 or 85, except for safari, which needs to go back to 100.

How can i target this in the jquery? Is there some way i can put

html>#div1.safarihack {opacity: 1; }

into this?

$(this).html(nextHtml).animate({'opacity':'0.85',
                                              'filter':'alpha(opacity=85)', 
                                              '-moz-opacity':'0.85',
                                              '-khtml-opacity':'0.85',
                                              }, 500);

*Note that (this开发者_StackOverflow中文版) = #div1**

See finding if the current working browser is safari via css or javascript : could help you, good luck

I think you'll find this thread interesting: Distinguish Chrome from Safari using jQuery.browser

Try

$(this).html(nextHtml).animate({opacity:($.browser.safari)?1:.85});

Note that $.browser.safari is deprecated.

There's also no need to use all those opacity-attributes in jQuery, jQuery will translate "opacity" to the attribute the current browser is supporting.

Does this demo help with your problem? I lowered the opacity to make the hover more obvious for the demo.

Edit: Updated demo in which the text opacity changes. Seems to work OK in Safari5

I don't really understand the problem with Safari opacity as I am not seeing any problems running the demo in Safari5, Chrome12 or Firefox4.