Solved

Problem with .animate in jquery

Posted on 2010-11-22
12
654 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:flynny
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

772 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now