Link to home
Start Free TrialLog in
Avatar of flynny
flynnyFlag for United Kingdom of Great Britain and Northern Ireland

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?
<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>

Open in new window

Avatar of Justin Mathews
Justin Mathews

Try changing to:


if ($.browser.msie) {
 $active.children().each(function() { $(this).css('filter', ''); });
 $next.children().each(function() { $(this).css('filter', ''); });
}

Open in new window

Avatar of flynny

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:arial; font-size:12px; color:#474747; text-decoration:none; font-weight:bold;}

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.
Avatar of flynny

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.jQuery.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.
<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>

Open in new window

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.
Avatar of flynny

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?
ASKER CERTIFIED SOLUTION
Avatar of CtrlAltDl
CtrlAltDl
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial