Solved

Problem with .animate in jquery

Posted on 2010-11-22
12
656 Views
Last Modified: 2012-06-21
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

0
Comment
Question by:flynny
  • 3
  • 3
12 Comments
 
LVL 16

Expert Comment

by:jmatix
ID: 34190779
Try changing to:


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

Open in new window

0
 

Author Comment

by:flynny
ID: 34195157
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
0
 
LVL 16

Expert Comment

by:jmatix
ID: 34197519
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.
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:flynny
ID: 34197956
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

0
 
LVL 16

Expert Comment

by:jmatix
ID: 34198097
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.
0
 

Author Comment

by:flynny
ID: 34206275
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?
0
 
LVL 14

Accepted Solution

by:
CtrlAltDl earned 500 total points
ID: 34306945
It's a known jQuery bug.
http://bugs.jquery.com/ticket/6652

You have to remove the "filter" style when it's done like this:

.animate({ opacity: 0.0 }, 1000, function() {
  $(this).css('filter', 'none');

Or:

.animate({ opacity: 0.0 }, 1000, function(){
    if ($.browser.msie){this.style.removeAttribute('filter');
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question