CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Tim Sullivan
Tim Sullivan

Reputation: 16888

DIV fadeIn and position

I'm writing a plugin to popup a div on a click. I have a hidden div created, and I want to fade it in. However, instead of fading in, it just appears, as if I'd called show(). I'm using the jQuery UI Position tool, so my code looks like this:

$('#popover-1'+index).fadeIn('slow').position({
                    of: elem,
                    my: 'center top',
                    at: 'center bottom',
                    offset: '0 10'
                });

I thought perhaps I'd try being clever, and changed it to this, but without effect:

$('#popover-'+index).fadeIn('slow', function() {
                    $(this).position({
                        of: elem,
                        my: 'center top',
                        at: 'center bottom',
                        offset: '0 10'
                    });
                });

The HTML looks like this:

<div id="person-edit-1"  class='popover bottom' style="display:none;">
  <div class="arrow top" style="position: absolute; "></div>
  <div>Content goes here</div>
</div>

The position method won't position non-visible elements, so it didn't work when I called position before fadeIn.

Thanks in advance!

Upvotes: 1

Views: 963

Answers (1)

Blake
Blake

Reputation: 86

If jquery-ui position must have it be visible, than you will have to unhide it, position it, re-hide it, and then fade it in.

One option: instead of using fadeIn('slow'), you could position the element, set the opacity to 0, then animate the opacity property. This will only work on browsers that understand the opacity property (not IE):

$('#popover-' + index).show().position({
  of: elem,
  my: 'center top',
  at: 'center bottom',
  offset: '0 10'
}).css('opacity', '0').animate({'opacity': '1'}, 'slow');

Upvotes: 3

Related Questions