[英]using two different click animations in one nav bar
My website uses html with CSS file. 我的网站使用HTML和CSS文件。 My nav bar uses Jquery click animation.
我的导航栏使用Jquery单击动画。 I want to add another level of animation to the nav functions, but can't figure out how to insert another click animation (slide/toggle) without disrupting the existing click animation (scrolling).
我想向导航功能添加另一级别的动画,但无法弄清楚如何在不破坏现有点击动画(滚动)的情况下插入另一个点击动画(滑动/切换)。
Here is how it is set up now 现在是这样设置的
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jonah Rapino - Film Scoring</title>
<link rel="stylesheet" href="rapino.css" media="screen, projection"/>
<link href='http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="" type="image/x-icon">
<style type="text/css">
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#nav").click(function(e){
e.preventDefault();
var theClicked = $(e.target).attr("href"),
targetImg = $(theClicked).offset().top;
$("html,body").animate({
scrollTop : targetImg -10,
}, 1400);
//console.log(targetImg)
});
});
</script>
</body>
<div id="content">
<div id="nav">
<ul class="listless">
<li><a href="#about">About</a></li>
<li><a href="#current-work">Work</a></li>
<li><a href="#feature-film-scores">Film</a></li>
<li><a href="#silent-film-scores">Silent</a></li>
<li><a href="#classical-music">Classical</a></li>
<li><a href="#info">Info</a></li>
<li><a href="#download">Download</a></li>
<li><a href="#friends">Friends</a></li>
</ul>
</div>
What I want: I want to insert a toggle function to the Work link. 我想要的是:我想在“工作”链接中插入一个切换功能。 When you click Work a pop down sub menu containing the links - Film, Silent, Classical appear and you can click on them and the page scrolls to the target indicated.
当您单击“工作”时,将出现一个包含链接的下拉子菜单-电影,无声,经典,您可以单击它们,页面滚动到指示的目标。 Currently they are just static links.
当前它们只是静态链接。
I hope my language/layout isn't confusing or a waste of time here. 我希望我的语言/布局不会造成混乱或浪费时间。 Can anyone help?
有人可以帮忙吗?
Maybe something like 也许像
$('#nav a').click(function(e) {
e.preventDefault();
if($(this).attr('href') === '#current-work') {
// do your animation for work
}
else {
// do animation for all other items
var targetImg = $($(this).attr('href')).offset().top;
$("html,body").animate({
scrollTop : targetImg -10,
}, 1400);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.