Solved

Problem with .animate in jquery

Posted on 2010-11-22
12
655 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
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 …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

777 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