1

I used jQuery UI to slide a div. But the next item .bottom-div does not slide down/up smoothly.

I know I can do that with pure jQuery. Just for query, is this possible using jQuery UI?

https://jsfiddle.net/L4pzytkg/

3 Answers 3

1

Rather than using the show() and hide() functions, use the slide() function:

$(function() {
  $('#showdiv').click(function() {
    $('.mydiv').slideDown(300);
  });

  $('#hidediv').click(function() {
    $('.mydiv').slideUp(300);
  });

  $('#togglediv').click(function() {
    $('.mydiv').slideToggle(300);
  });
});
.ui-effects-wrapper {
  height: auto !important;
}
.wrap {} .mydiv {
  height: 300px;
  padding: 15px 30px;
  border: 2px solid;
  background: orange;
}
.mydiv p {
  padding: 10px 30px;
  margin: -15px -30px 0;
  background: yellow;
}
.below-div {
  background: red;
  padding: 10px 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="showdiv">
  Slide Down
</button>
<button type="button" id="hidediv">
  Slide Up
</button>
<button type="button" id="togglediv">
  Toggle
</button>

<div class="wrap">

  <div class="mydiv">
    <p>This is a div with long text; really extralong</p>
  </div>
</div>
<div class="below-div">
  This is a div below sliding div.
</div>

Updated JSFiddle

0

may be like this?:

$(function() {
  $('#showdiv').click(function() {
    $('.mydiv').show(1000);
  });

  $('#hidediv').click(function() {
    $('.mydiv').hide(1000);
  });
});
.ui-effects-wrapper {
  height: auto !important;
}
.wrap {} .mydiv {
  height: 300px;
  padding: 15px 30px;
  border: 2px solid;
  background: orange;
}
.mydiv p {
  padding: 10px 30px;
  margin: -15px -30px 0;
  background: yellow;
}
.below-div {
  background: red;
  padding: 10px 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="showdiv">
  Slide Down
</button>
<button type="button" id="hidediv">
  Slide Up
</button>

<div class="wrap">

  <div class="mydiv">
    <p>This is a div with long text; really extralong</p>
  </div>
</div>
<div class="below-div">
  This is a div below sliding div.
</div>

0

Instead to use the slide effect you could use the size effect:

$(function () {
  $('#showdiv').click(function() {
    $('.mydiv').show('size', { origin: ['top', 'center'] }, "slow");
  });

  $('#hidediv').click(function() {
    $('.mydiv').hide('size', { origin: ['top', 'center'] }, "slow");
  });
});
.ui-effects-wrapper {
  height: auto !important;
}
.wrap {
}
.mydiv {
  height: 100px;
  padding: 15px 30px;
  border: 2px solid;
  background: orange;
}
.mydiv p {
  padding: 10px 30px;
  margin: -15px -30px 0;
  background: yellow;
}
.below-div {
  background: red;
  padding: 10px 30px;
}
<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>

<button type="button" id="showdiv">
    Slide Down
</button>
<button type="button" id="hidediv">
    Slide Up
</button>
<div class="wrap">
    <div class="mydiv">
        <p>This is a div with long text; really extralong</p>
    </div>
</div>
<div class="below-div">
    This is a div below sliding div.
</div>

You may also use the animate:

$(function () {
  $('#showdiv').click(function() {
    $('.mydiv').animate( { height: "show" }, 'slow');
  });

  $('#hidediv').click(function() {
    $('.mydiv').animate( { height: "hide" }, 'slow');
  });
});
.ui-effects-wrapper {
  height: auto !important;
}
.wrap {
}
.mydiv {
  height: 100px;
  padding: 15px 30px;
  border: 2px solid;
  background: orange;
}
.mydiv p {
  padding: 10px 30px;
  margin: -15px -30px 0;
  background: yellow;
}
.below-div {
  background: red;
  padding: 10px 30px;
}
<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>
<button type="button" id="showdiv">
    Slide Down
</button>
<button type="button" id="hidediv">
    Slide Up
</button>
<div class="wrap">
    <div class="mydiv">
        <p>This is a div with long text; really extralong</p>
    </div>
</div>
<div class="below-div">
    This is a div below sliding div.
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.