JQuery – How to i smoothly resize an image to create a pulsating effect

effectimagejqueryresizescale

Hey, Im working on a website with a friend of mine, and from the start, our client has been unhappy with the quality of one of our animations. This animation takes an image and makes it larger, it then makes it smaller, and repeats to get a pulsating effect. The opacity also changes throughout the animation.

The current animation is on the home page of the site http://laveryrowe.com. The animation in question is the 75% image that you can see immediately upon arriving at the site.

I have tested in safari, firefox and internet explorer. The animation only just about makes the cut in firefox, however safari and internet explorer do not produce smooth enough resizes for our client.

Does anyone know of a better method of animating than the one i have used? (see code below and check out the site for an example).

function pulse() {
    $('#seventyfive').animate({
        marginTop: 175, 
        marginLeft: 25, 
        width: 261, height: 98, 
        opacity: 0.5
    }, 700, function() {
        $('#seventyfive').animate({
            marginTop: 161.95, 
            marginLeft: 15.2, 
            width: 287.1, height: 107.8, 
            opacity: 1
        }, 700, function() {
            pulse();
        });
    }); 
};

Many thanks in advance, We could really use a hand,

Edit: The issue isn't with the positioning, (or at least i don't think it is) instead, its more to do with the way the image is resized, you can notice the jittery edges as it gets bigger. It seems to look better as the opacity is increased, but i need the same quality for when it is opaque.

Jai

Best Answer

Your animation isn't smooth because your marginLeft gets rounded down (image moves to the left one pixel) and then your width gets rounded up (image pixels are moved right just a little because they are re-sampled to a larger width.) Even though the image didn't move right your eyes tell you that it did because they perceive the middle of the image as being slightly to the right. This along with doing the same thing vertically makes the animation appear to jump around.

Here's an example of why I think the edges seem to flicker or shake. Below Are two images both 3 by 1 pixels. They are both resized to 5 by 1 and moved 4 pixels to the left. The blue one is what you are seeing where the size and location change independently. The red one only allows the size to change when the location changes and should appear to be a smooth animation.

enter image description here

Related Solutions

Javascript – How to upload files asynchronously with jQuery

With HTML5 you can make file uploads with Ajax and jQuery. Not only that, you can do file validations (name, size, and MIME type) or handle the progress event with the HTML5 progress tag (or a div). Recently I had to make a file uploader, but I didn't want to use Flash nor Iframes or plugins and after some research I came up with the solution.

The HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

First, you can do some validation if you want. For example, in the .on('change') event of the file:

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  // Also see .name, .type
});

Now the $.ajax() submit with the button's click:

$(':button').on('click', function () {
  $.ajax({
    // Your server script to process the upload
    url: 'upload.php',
    type: 'POST',

    // Form data
    data: new FormData($('form')[0]),

    // Tell jQuery not to process data or worry about content-type
    // You *must* include these options!
    cache: false,
    contentType: false,
    processData: false,

    // Custom XMLHttpRequest
    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        // For handling the progress of the upload
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});

As you can see, with HTML5 (and some research) file uploading not only becomes possible but super easy. Try it with Google Chrome as some of the HTML5 components of the examples aren't available in every browser.

Javascript – How to check if an element is hidden in jQuery

Since the question refers to a single element, this code might be more suitable:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

It is the same as twernt's suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ.

We use jQuery's is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match, otherwise return false.

Best Answer

Related Solutions

Javascript – How to upload files asynchronously with jQuery

Javascript – How to check if an element is hidden in jQuery

Related Topic