flynny
asked on
Problem with .animate in jquery
Hi all,
I'm using a siple animation to cycle through some divs containng some quotes. Now in FF this is working perfectly but in ie the span is appearing pixelated. Now i have googled around and found i need to remove the filter attribute in ie, but this doesn't seem to be working or i seem to be doing it wrong. can someone please help?
belo is the code i am using;
any ideas where im going wrong?
I'm using a siple animation to cycle through some divs containng some quotes. Now in FF this is working perfectly but in ie the span is appearing pixelated. Now i have googled around and found i need to remove the filter attribute in ie, but this doesn't seem to be working or i seem to be doing it wrong. can someone please help?
belo is the code i am using;
any ideas where im going wrong?
<div id="slideshow">
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow div.active');
if ($active.length == 0) $active = $('#slideshow div:last');
var $next = $active.next().length ? $active.next(): $('#slideshow div:first');
$active.addClass('last-active');
$active.css({ opacity: 1.0 })
.addClass('active')
.animate({ opacity: 0.0 }, 1000, function() {
// $active.removeClass('active last-active');
if ($.browser.msie) {
$active.children().each(function() { this.style.removeAttribute('filter'); });
$next.children().each(function() { this.style.removeAttribute('filter'); });
}
});
$next.css({ opacity: 0.0 })
.addClass('active')
.animate({ opacity: 1.0 }, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval("slideSwitch()", 8000);
});
</script>
<div class="active">
<p>
P TEXT </p>
<span class="greyTxtbold">NAME</span>
</div>
<div>
<p>
P TEXT </p>
<span class="greyTxtbold">NAME</span>
</div>
<div>
<p>
P TEXT </p>
<span class="greyTxtbold">NAME</span>
</div>
<div>
<p>
P TEXT </p>
<span class="greyTxtbold">NAME</span>
</div>
<div>
<p>
P TEXT </p>
<span class="greyTxtbold">NAME</span>
</div>
</div>
</div>
ASKER
Hi jmatix,
No it is strange, the pargraph text is fine, but the span text is appearing pixelated, the css for this is
.greyTxtbold{font-family:a rial; font-size:12px; color:#474747; text-decoration:none; font-weight:bold;}
any ideas why this is happening?
Matt
No it is strange, the pargraph text is fine, but the span text is appearing pixelated, the css for this is
.greyTxtbold{font-family:a
any ideas why this is happening?
Matt
This is a known IE problem - non anti-aliasing done for animated text. There is a fix described here:
http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/
See if that works for you.
http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/
See if that works for you.
ASKER
Thanks for the link,
ok I have the following code now which doesn't seem to be doing anything.
any ideas what I could be doing wrong? am I calling the code correctly?
i have include the js like this;
<script type="text/javascript" src="./js/IEffembedfix.jQu ery.js"></ script>
and stored the image in the root image folder (i.e. ~/images/hIEfix.png) and changed the url in the js file to be;
var pngimgurl = "images/hIEfix.png";
Hope you can help.
Matt.
ok I have the following code now which doesn't seem to be doing anything.
any ideas what I could be doing wrong? am I calling the code correctly?
i have include the js like this;
<script type="text/javascript" src="./js/IEffembedfix.jQu
and stored the image in the root image folder (i.e. ~/images/hIEfix.png) and changed the url in the js file to be;
var pngimgurl = "images/hIEfix.png";
Hope you can help.
Matt.
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow div.active');
if ($active.length == 0) $active = $('#slideshow div:last');
var $next = $active.next().length ? $active.next(): $('#slideshow div:first');
$active.addClass('last-active');
$active.css({ opacity: 1.0 })
.addClass('active')
.animate({ opacity: 0.0 }, 1000, function() {
// $active.removeClass('active last-active');
});
$next.css({ opacity: 0.0 })
.addClass('active')
.animate({ opacity: 1.0 }, 1000, function() {
$active.removeClass('active last-active');
$("p, span").ieffembedfix();
});
}
$(function() {
setInterval("slideSwitch()", 8000);
});
</script>
Are you running in IE 6? IEffembedfix.jQuery.js is apparently geared for IE 7/8. If you look at the code it checks for jQuery.support.objectAll to make sure IE 7/8.
ASKER
I'm actually running ie 8.0.6? so i can't understand.
I've uploaded the site here www.lbslegal.co.uk so you can see.
any ideas wha i'm doing wrong?
I've uploaded the site here www.lbslegal.co.uk so you can see.
any ideas wha i'm doing wrong?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Open in new window