CODEWITHSUNDEEP
jqueryhidedirection
Philip
Philip

Reputation: 319

Direction when fading out element with hide()

I'm using the code shown in this fiddle to remove a div with the effect provided by hide(). I'm trying to make the div fading out to its top-right corner instead of the top-left but couldn't get it to work even when specifying direction:'right' in the options.

Does anyone know if this is possible? Thanks in advance.

Upvotes: 1

Views: 142

Answers (1)

gaetanoM
gaetanoM

Reputation: 42044

The hide function you currently use is an extension included in the jQuery UI. This function calls internally the animate function (refer to jQuery UI hide).

In order to obtain the effect you are looking for here is the snippet:

$(function () {
  $('div').on('click', function () {
    $(this).hide('size', {
      to: {
        height: 0,
        width: 0,
        marginLeft: parseInt($(this).css('marginLeft'), 10) == 0 ? $(this).outerWidth() : 0
      }
    },
                 function () {
      $(this).remove();
    });
  });
});
div {
  cursor: pointer;
  width: 200px;
  height: 300px;
  background-color: #3b85c3;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div>
</div>

Using, instead, the standard animate function here is the corresponding snippet:

$(function () {
  $('div').on('click', function () {
    $(this).animate({
      height: 'toggle',
      width: 'toggle',
      marginLeft: parseInt($(this).css('marginLeft'), 10) == 0 ? $(this).outerWidth() : 0
    }, function () {
      $(this).remove();
    });
  });
});
div {
  cursor: pointer;
  width: 200px;
  height: 300px;
  background-color: #3b85c3;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div>
</div>

Upvotes: 2

Related Questions