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?
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?
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>
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>
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>