Ich verwendete jQuery UI zum Verschieben eines div. Aber der nächste Punkt .bottom-div rutscht nicht sanft nach unten/oben.Schieben Sie ein Div mit dem nächsten Inhalt mithilfe von jQuery UI
Ich weiß, dass ich das mit reinem jQuery tun kann. Nur zur Abfrage, ist dies mit jQuery UI möglich?
https://jsfiddle.net/L4pzytkg/
sein kann, wie dies ?:
$(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>Anstatt die show() und hide() Funktionen, verwenden Sie die slide() Funktion:
$(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>Statt den Schieber Effekt verwenden Sie die Größe Effekt verwenden:
$(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>Sie können auch die belebte verwenden:
$(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>