我正在尝试平滑过渡到页面中的锚点.目标是当您单击指向锚点的链接时,页面淡出(滚动)并随被调用的锚点本身淡入.
我有这个标记,它正确淡入/淡出,URL更改为被调用的锚,但它不会滚动到被调用的元素
$(document).ready(function() {
$("a.transition").click(function(event) {
event.preventDefault();
linkLocation = this.href;
$(".container").fadeOut(500, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
$(".container").fadeIn(500);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div id="A">This is A <a href="#B" class="transition">Go to B</a>
</div>
...some large text...
<div id="B" style="margin-top: 3000px;">This is B <a href="#A" class="transition">Go to A</a>
</div>
</div>我正在考虑制作一个带有平行四边形容器的菜单,并在CSS上制作动画.这个想法是当你悬停一个项目时,平行四边形会改变它的高度以产生视觉缩放效果.
到目前为止,这么好,但问题是,当我在悬停时改变平行四边形的高度时,它也会改变它的位置向右一点,我不知道为什么.
因此,问题是:是否有任何方法可以改变平行四边形的高度以保持它的位置？
这是我得到的不良影响:
.container {
float: left;
padding: 0 0.5rem;
}
.parallelogram {
position: relative;
width: 125px;
height: 50px;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-o-transform: skew(-30deg);
transform: skew(-30deg);
transition: all .4s linear;
}
.parallelogram:hover {
height: 100px;
}<div class="container">
<div class="parallelogram" style="background-color: red;">
1
</div>
</div>
<div class="container">
<div class="parallelogram" style="background-color: green;">
2
</div>
</div>
<div class="container">
<div class="parallelogram" style="background-color: blue;">
3
</div>
</div>我正在学习 JavaScript，但遇到了一个简单的问题，我不知道如何处理。
我想要实现的是“按住”或“冻结”幻灯片，仅button在用户需要时单击 a 来禁用所有可能的导航（键盘箭头、单击和拖动、触摸交互）。通过单击此button按钮，用户可以使用滑块启用或禁用导航控件。
因此，一旦单击此按钮button，用户将无法在幻灯片上导航。用户必须再次单击button以启用控件。
这是我到目前为止得到的：
jQuery(document).ready(function($) {
$('.slider').slick({
infinite: true,
fade: false,
centerMode: true,
variableWidth: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows: false,
autoplay: false
});
});
var hold = false;
$('#hold').click(function() {
$(this).attr("class", "active disabled");
if (hold == false) {
$('.slider').slick({
accesibility: false,
draggable: false,
swipe: false,
touchMove: false
});
hold = true;
} else {
$('.slider').slick({
accesibility: true,
draggable: true,
swipe: true,
touchMove: true
});
hold = false;
$("#hold").attr("class", …