Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Problem with .animate in jquery

Posted on 2010-11-22
12
Medium Priority
?
662 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
12 Comments
 
LVL 16

Expert Comment

by:Justin Mathews
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:Justin Mathews
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
Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

 

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:Justin Mathews
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 2000 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

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
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…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

722 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