CODEWITHSUNDEEP
jquery
Sam
Sam

Reputation: 500

jQuery's fadeToggle() animation lags

I have a popup with a large image and some text inside it.

It has display:none; as its style and to view it I have used jQuery's fadeToggle() function. However, the transition from being non visible and visible laggy and not smooth unlike the other popups I have with just pure text.

I suspect it may be because the image is large, so would I have to somehow preload the image to make the transition smooth?

EDIT:

It is just a simple jQuery popup like so:

HTML

<div id="thumb1">
  <img src="thumbnail.png">
<div>    

<div id="popup">
  <img src="#">
  <div>
    <p>Image Description here</p>
  </div>
</div>

CSS

#popup{
    display: none;
    position: fixed;
    top: 30;
    bottom: 30;
    left: 30;
    right: 30;
    z-index: 100;
    background-color: #000;
   }  
#popup .image{
       float: left;
   }
#popup .image img{
       height: 100%;
   }

jQuery

    $("#thumb1").click( function() {
       $("#popup").fadeToggle();    
       $("#overlay").fadeToggle();
    });

here is a link to the site used for testing: http://ignitedesign.co.nr/

click on the Itz Flipz Thumbnail and the animation is not faded.

Upvotes: 0

Views: 677

Answers (1)

Jason
Jason

Reputation: 4159

It appears you have webkit transition AND jQuery animations happening on the same object. I believe that is why it is acting very strange and appears to be lagging. For example, I see that #popup has CSS transition animations and is being animate by jQuery.

There are two things you could do to increase performance.

First, you have fading in two separate objects that are on top of each other. It should be more efficient to fade in a single element. If you can nest the popup within the overlay, that should help.

Second, jQuery's animation methods are not the most efficient. One major factor is jQuery doesn't use requestAnimationFrame for animation. There are plenty of debates about the most efficient animation methods (http://css-tricks.com/myth-busting-css-animations-vs-javascript/).

The simplest solution is to use something like jQuery Transit (http://ricostacruz.com/jquery.transit/) for animation. It has good fallbacks (see snippet on site) for older browsers. It should help in performance. You could look at other Javascript methods if you like.

The image size (2mb) is probably somewhat of a factor on some devices. It really could be saved as JPEG and save a lot of file size.

Upvotes: 1

Related Questions