所以我正在制作一个网站,里面有很多占据100%身高的Div.我想制作一个按钮,这样当它点击时可以顺利滚动到下一个div.我编写了一些东西,所以当它点击时,它会滚动到特定的div.
$(".next").click(function() {
$('html,body').animate({
scrollTop: $(".p2").offset().top},
'slow');
});Run Code Online (Sandbox Code Playgroud)
body{
margin: 0;
height: 100%;
}
.p1{
height: 100vh;
width: 70%;
background-color: #2196F3;
}
.p2{
height: 100vh;
width: 70%;
background-color: #E91E63;
}
.p3{
height: 100vh;
width: 70%;
background-color: #01579B;
}
.admin{
background-color: #B71C1C;
height: 100vh;
position: fixed;
right: 0%;
top: 0%;
width: 30%;
float: left;
}Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p1">
</div>
<div class="p2">
</div>
<div class="p3">
</div>
<div class="admin">
<button class="next">NEXT</button>
</div>Run Code Online (Sandbox Code Playgroud)
我有个问题.我刚开始学习jQuery,这是我第一次使用javascript的经历.我想在点击上制作一个元素动画,我确实做到了:
HTML:
<h1>Testing</h1>
Run Code Online (Sandbox Code Playgroud)
我正在使用Animate.css在点击时发生一些动画.这是我的jQuery:
$('h1').click(function (e) {
$('h1').addClass('animated bounce');
});
Run Code Online (Sandbox Code Playgroud)
我想要实现的是,当我点击第二次时,动画再次发生,事实上,我想删除动画弹跳类并再次添加它,这样动画将再次发生.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<h1>Testing</h1>
<script>
$('h1').click(function (e) {
$('h1').addClass('animated bounce');
});
</script>
</body>Run Code Online (Sandbox Code Playgroud)
请告诉我,如果我按照应该的方式编写代码,我的意思是如果语法很好,我已经看到了带有$(this)的代码,我不确定那是什么,我也见过像.on('click')之类的东西
谢谢.