Question

I have been trying to get this to work for a few days.

Basically i have a div Option1Div and a image with the id Option1, When you click the image it should change the div from Hidden to Visible, and change the width from 0 to 500px, but so far nothing happens.

$('#Option1').click(function() {
  $('#Option1Div').animate({
    opacity: 0.25,
    width: "500 px"
  }, 5000, function() {
    // Animation complete.
  });
});

Answer 1

You’re close. The CSS should be something like this:

 #Option1Div { width: 0; height: 100px; opacity: 0; }

and the jQuery

$('#Option1').click(function() {
      var ele = $('#Option1Div');
      ele.animate({

               opacity    : 1,
               width      : '500px'

          }, 5000, function() {
          // Animation complete.
  });
});

jsFiddle: http://jsfiddle.net/haHxC/