我使用jQuery UI來滑動div
。但下一個項目.bottom-div
不能順利地向下/向上滑動。使用jQuery UI滑動下一個內容的div
我知道我可以用純jQuery來做到這一點。只是爲了查詢,這可能使用jQuery UI嗎?
https://jsfiddle.net/L4pzytkg/
我使用jQuery UI來滑動div
。但下一個項目.bottom-div
不能順利地向下/向上滑動。使用jQuery UI滑動下一個內容的div
我知道我可以用純jQuery來做到這一點。只是爲了查詢,這可能使用jQuery UI嗎?
https://jsfiddle.net/L4pzytkg/
可能是這樣?:
$(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>
而不是使用show()
和hide()
功能,使用slide()
功能:
$(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>
而是用幻燈片效果,你可以使用尺寸效應:
$(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>
您還可以使用動畫:
$(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>