CODEWITHSUNDEEP
jqueryhtmlwidthhidden
NekoLLX
NekoLLX

Reputation: 219

Animating the change of a hidden div width with jQuery

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.
  });
});

Upvotes: 2

Views: 1566

Answers (3)

Foreign Object
Foreign Object

Reputation: 1640

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/

Upvotes: 0

L0j1k
L0j1k

Reputation: 12635

I can see you are using the code directly from the jQuery animate() manual. Also from that page: Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect.

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

Upvotes: 1

Andy
Andy

Reputation: 30135

If your div has display:none you have to make it visible first since the display is independent of the opacity.
Try:

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

Upvotes: 3

Related Questions