Solved

Problem with .animate in jquery

Posted on 2010-11-22
12
658 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: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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

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

Why You Need a DevOps Toolchain

IT needs to deliver services with more agility and velocity. IT must roll out application features and innovations faster to keep up with customer demands, which is where a DevOps toolchain steps in. View the infographic to see why you need a DevOps toolchain.

Question has a verified solution.

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

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

738 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