Animate opacity doesn't work properly on IE - javascript

I'm trying to use animate() to change the height and opacity of a div. The div has an image background in CSS. It works fine on Firefox and Safari, but when I test it in IE the background is being removed. This is my code:
if (jQuery.support.opacity) {
jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300});
} else {
jQuery('#list_box').animate({filter: 'alpha(opacity=100)',height: '300px',top: newTop},{duration: 300});
}
How can I fix this problem?

I was under the impression that jQuery did the whole opacity support thing for you.
Does this work for all browsers?
$('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300});

You do not need to write a special handler for IE, jQuery does it all for you behind the scenes:
jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop}, 300);
HOWEVER: If you have a 24-bit transparent PNG as your background image that is disappearing, you need to be aware that you cannot combine filter: alpha (which jQuery correctly uses behind the scenes in IE) with a 24-bit transparent PNG in IE7 or IE8. I believe the only way around it is to set a background color (other than transparent) on the object on which you are using filter: alpha
How to test: Simply set a background color on #list_box to a solid color by adding something like this to your CSS after your background-image declaration:
#list_box { background-color: red }
If the background image remains, and your #list_box animates correctly (except for the hideous background) you know what the problem is and will have to find another way to accomplish what you want.

I've been having the same problem. I stumbled into the answer, when I set the opacity to 40%:
$('#list_box').stop().animate({opacity: '.4'},"slow");
I noticed that made the opacity jump to 100%, then animate down to 40%. Eureka.
So, now I explicitly set the opacity to zero before the animation:
$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow");
That animates smoothly, except the text still looks horrible in IE.
To clean up the text, I removed the opacity from the css in IE after the animation. This seems to clear up the text quite a bit in IE6 and IE8.
$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow",function(){
//remove the opacity in IE
jQuery.each(jQuery.browser, function(i) {
if($.browser.msie){
$('#list_box').css({opacity:''});
}
});
});
I'm testing it on a Mac in Parallels, in IE6 and IE8. Everything seems to work fine on the Mac side.

Very (very) late with the answer, but as this is at the top of Google when I looked for help with a jquery v animate issue in IE8 I thought i'd post it here.
My problem was connected to the hasLayout bug in IE, and adding "display: inline-block" to the element to be faded fixed the problem.

I had the same sort of issue with this:
$('#nav li').hover(function() {
$(this).stop().animate({opacity: '0.4'}, 'slow');
},
function() {
$(this).stop().animate({opacity: '1'}, 'slow');
});
I simply added float:left; to the #nav li css and it fixed the issue.

In jQuery, once the div is set to have either opacity:0 (in Standards Compliant Browsers) or filter:alpha(opacity=0) in IE, you can just use $('#div').animate({opacity:1},100); Since jQuery supports cross-browser support, if you end up animating the filter via IE, then chances are jQuery is trying to support IE and the conflict comes when jQuery fires the opacity change x2.
I hope this helps. I have had the same issue, plus odd issues with IE not being able to handle fading on a div stack with multiple items in it.

I noticed the problem was caused by position:relative of the container. If "switching" to absolute opacity animation will work.

I´ve had the same problem with the IE 7,
the problem was a trailing comma after the opacity property
jQuery(this).animate({opacity:1.00,},800);
It has to be:
jQuery(this).animate({opacity:1.00},800);

I found a solution that worked for me: position:inline-block;
This works for fading text opacity, I haven't tried it with a CSS background image. Maybe it helps anyway.
I just wanted to report a small bug with fadeTo method in Internet Explorer 8. It won't work if your element as "display" set to "inline". I found that you need to put it to "inline-block" and then it works perfectly. There is nothing about this on the web and it's not the first time I have this problem.
Don't know if it's the right way to report this issue, but i'm sure someone will read this post :)
found at http://www.devcomments.com/IE-8-fadeTo-problem-with-inline-elements-to65024.htm

I solved it with adding an opaque background to the animated element:
CSS:
.overlay {
position: absolute;
top: 0;
left: 0;
width: 195px;
height: 274px;
cursor: pointer;
background: #fff url('../images/common/image_hover.png') 0 0 no-repeat; /* the solution */
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
filter: alpha(opacity=0); /* IE6-7 */
zoom: 1;
}
JS:
$('.overlay').hover(
function(){
$(this).animate({'opacity': 0.7}, 300);
},
function(){
$(this).animate({'opacity': 0}, 250);
}
);
Works for IE7-8
Hope this will help someone ;)

You can use fadeTo to accomplish what you want to do:
$('#list_box').fadeTo("slow", 0.33);
fadeIn and fadeOut do transitions from 0 to 100%, but the above will allow you to fade to an arbitrary opacity.
(http://docs.jquery.com/Effects/fadeTo#speedopacitycallback)

Same problem with IE8. Adding "display: inline-block" to .hover2 in fixed the problem.
$(function() {
$(".hover1").css("opacity","1.0"); // Default set opacity to 1.0
// On Mouse over
$(".hover1").hover(
function () {
// SET OPACITY TO 15%
$("span.hover2").stop().animate({opacity: 0.15}, 1200);
},
// ON MOUSE OUT
function () {
// SET OPACITY BACK TO 100%
$("span.hover2").stop().animate({opacity: 1.0}, 1200);
}
);
}
);

Ok this might help a little bit, I found a solution in this site about the exact problem http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/
in conclusion, the general problem is the opacity filter on IE, in your specific case there is not much you can do, thought
but in case you fade in and out, the prevent the problem with a png background image you just have to remove the filter attribute the jQuery function added whe the fx ends. Just use a callback function, something like that would do it:
$('#node').fadeOut('slow', function() {<br/>
this.style.removeAttribute('filter');<br/>
});
in case you selectors returns more than one, use the each function, something like this:
$('.nodes').fadeIn('fast',
function() {
$(this).each (
function(idx,el) {
el.style.removeAttribute('filter');
}
);
}
);

Do you use some pngfix script ? that may be the culprit.

Related

css3 animation using transform

First li in line of several ones doesn't glue to the next one if the first one smoothly derceases to 0 using css3 animation via transform property. Why?
Working sourcecode example: http://codepen.io/anon/pen/lLpeo
Thanx
Because you use scaleX. It actually doesn't change the size of the li but scales it. I think the solution is to use width property http://codepen.io/anon/pen/lIbyC
#-webkit-keyframes 'movement'{
to {
width: 0px;
}
}

How can this CSS card flip effect fall back gracefully when CSS3 support is lacking?

I'm using the library FlipClock.js to build an analog-style clock that uses a version of the CSS "card flip effect." Unfortunately, only after building out my project did I notice a long-standing bug affecting Internet Explorer 9 and below:
https://github.com/objectivehtml/FlipClock/issues/7
In IE9 and below, the clock time lags by one second (i.e., in the first second of animation, nothing visible changes), and the digits in the clock are also offset by a value of 1. My expectation is not for the CSS flip animation to work, but for the digits to change instantly as they currently do, only be correct.
I've been troubleshooting for a while but have yet to find a solution or even pinpoint the problem. I have a hunch that this isn't a script-related bug; I suspect that the digits are changing correctly in the HTML (hard to verify with IE's developer tools), but that they're just not showing as intended due to one or more CSS rules that were written not considering IE9's poor CSS3 support. I'm kind of expecting (or at least hoping) to stumble upon a CSS property or two that just fixes it.
The library is based on a proof-of-concept, which exhibits the same problem:
http://codepen.io/ademilter/pen/czIGo
I'm troubleshooting there to keep it simple, and if I find a fix, will submit a pull request to the FlipClock.js library.
I would greatly appreciate any help!
After removing the CSS animations and shadows, changing the z-index of li.before might do the trick (see http://codepen.io/cbuckley/pen/rysja):
body.play ul li.before {
z-index: 1; /* was previously 3 */
}
So you could use z-index: 1 by default, then feature-detect for CSS animations in the JavaScript and add a body class (say body.supports-animation). Then the relevant CSS might look like:
body.play ul li.before {
z-index: 1;
}
body.play.supports-animation ul li.before {
z-index: 3;
}
/* Prefix animation/background declarations with body.supports-animation too */
Caveat: I haven't tried this with FlipClock, nor have I actually tested on a browser without animation support, but I hope it gives one possible option :-)
Just changing the z-index will fix the problem for IE8 and IE9 but will break the transition for all modern browsers.
To Target specifically I8 or IE9 you can use this:
On your JS file add:
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
then on your css you can detect IE8 and IE9 with this code (flipclock.css line 160):
/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
z-index: 3;/*Original */
}
/*ie8 and ie9 fixes*/
html[data-useragent*='MSIE 8.0'] .flip-clock-wrapper ul.play li.flip-clock-before {
z-index: 1;
}
html[data-useragent*='MSIE 9.0'] .flip-clock-wrapper ul.play li.flip-clock-before {
z-index: 1;
}
That fixed the problem for me!

How can I affect Opacity of an image whilst hovering a div?

I'm so so close to acheiving what I want... but I'm wondering if I've hit the limit of what is possible with css.
If you navigate to http://host17.qnop.net/~gjcwebde/ecocamel/index.php?option=com_content&view=article&id=28&Itemid=49
We have a product slider. I'm trying to get it so that..
1) products start at 100% opacity on load.
2) hover over a product.. and the one you are hovering over stays at 100% opacity, the others all go to say 0.5 opacity (dim down).
I have ALMOST achieved this with css. Yo can see it working, except, when you hover over the description that pops up... the active image goes back to 0.5 opacity. Is it possible to control the opacity of this image, whilst hovering over the popup description? I really really hope so! Failing that... how might I acheive this with js? Looked at some on here, but none really apply to my situation. Hope I've given enough information for you to understand. Cheers!
#containingDiv:hover img { } will affect the img when any of the containing div is hovered over so I would use that if I were you, Ryan's solution will only affect the img if you are hovering over it
I picked up your html and put it in a fiddle. Take a look http://jsfiddle.net/hMW8N/
Anyway, this is all you basically need. I'm over specifying with these selectors, but I'm doing it so you can better understand.
#slider-list-stick-1:hover .slide-index{
opacity: 0.5;
filter:alpha(opacity=50); //ie
}
#slider-list-stick-1 .slide-index:hover {
opacity: 1;
filter:alpha(opacity=100); //ie
}
This should work for the opacity on the images when the user is not hovering.
divName img {
opacity:0.3;
filter:alpha(opacity=30);(IE)
}
And then when they hover (this should include your product info styling to as you have that displayed when hovering.)
diveName img:hover{
opacity:1.0;
filter:alpha(opacity=100);(IE)
}
Also throw in an active class on start so that at least one product is being shown when the page loads
For example:
divName img .activeLoad{
opacity:1.0;
filter:alpha(opacity=100);(IE)
}
Add to your styles this declaration
.slide-index:hover img{
opacity: 1;
}
As other divs are also in the slide-index container - the hover effect will still be applied.

background image not visible in iPad Safari

I have a background image for an input box..It works fine in IE/FF, but for some reasons it is not visible in iPad Safari..Below is the CSS for the same;
#rightContent .inputBox{
background:transparent url(images/keyback.gif) no-repeat scroll center 6px;
border:0pt none;
float:left;
height:40px;
#height:37px;
margin-left:10px;
width:450px;
overflow: hidden;
}
Please help. Thank you.
I would suggest splitting out the background style into seperate parts. Not all browsers support transparent (and possibly other parts of that style).
When a browser sees a style they don't know what to do with, they usually ignore the whole style. Putting the background-image onto it's own line (eg. it's own style) will let that property get picked up by browsers that can deal with it, rather than getting missed because it is lumped in with things the browser doesn't know about.
I believe the default value of background-color is transparent. Have you tried not setting a color? Also, since you have a set image with no-repeat, why not make the image a jpg/png and set a color to match the background-color you want.
I've had the same problem and have managed to get a working solution using jQuery
$(document).ready(function () {
var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';
$('.commands .command').css({
background: 'url(' + buttonsFilename + ')',
width: '55px',
height: '55px',
display: 'inline-block'
});
});
I'm using this within an ASP.NET MVC website, hence the <% %> tag.
I could only get it to work using the background shortcut css property. I couldn't get any of the following to work ...
background-image
backgroundImage
'background-image'
... when using the object notation. Unfortunately that wipes out any other background settings you may have. But I got around that by using another piece of jQuery to set my background-position property.
I am having the same problem, but I found that the image slice I was using was too thin to display on iPad. It is a texture, so I was using a 15px slice and an x-repeat, which is fine in all browsers but not iPad. After some experimenting I found that the threshold for iPad seems to be 130px.

Why does graphics have ugly black borders in IE after alpha animation?

The site I'm working on opens with a fancy jQuery opacity animation. Currently It's working in all browsers, but in IE all text and alpha images are left with ugly black borders that makes the text practically unreadable.
Is there some clever javascript command i can run to refresh/update the graphics?
Any other way to fix this?
My problem is entirely css and javascript related, so all source code can be found following the link.
Thanks for any help!
http://xistence.org/dev/
After an animation involving the opacity, you will want to clear the opacity value (back to a default of no value) to fix this mangled antialiasing in IE. Try this jQuery on the section in question after the animation is complete (e.g. in a callback):
$('.item').css('filter','');
This question probably has the answer you are looking for:
jquery cycle IE7 transparent png problem
from #darkoz's answer:
The way to get around this is to nest your png inside a container and then fade the container. Sort of like this:
<div id="fadeMe">
<img src="transparent.png" alt="" />
</div>
This snippet of jQuery code has served me well when dealing with opacity issues in IE.
$(function() {
if (jQuery.browser.msie)
$('img[src$=.png]').each(function() {
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
});
})
Define a solid background color to your image:
.container img {
background-color: white;
}
Define the background-image css property of your image to its src attribute:
$('.holder-thumbs li a img').each(function() {
$(this).css('background-image', $(this).attr('src'));
});
Advantage: you don't need to change your markup
Disadvantage: sometimes applying a solid background color is not an acceptable solution. It normally is for me.

Categories

Resources