0

私のウェブサイトでは、html と CSS ファイルを使用しています。私のナビゲーション バーは、Jquery クリック アニメーションを使用します。ナビゲーション機能に別のレベルのアニメーションを追加したいのですが、既存のクリック アニメーション (スクロール) を中断せずに別のクリック アニメーション (スライド/トグル) を挿入する方法がわかりません。

これが現在の設定方法です

<!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>

欲しいもの: Work リンクにトグル機能を挿入したい。[Work] をクリックすると、リンクを含むポップアップ サブ メニューが表示されます - Film、Silent、Classical が表示され、それらをクリックすると、指定されたターゲットまでページがスクロールします。現在、それらは単なる静的リンクです。

私の言語/レイアウトが混乱したり、ここで時間の無駄になったりしないことを願っています. 誰でも助けることができますか？

4

1 に答える 1

1

多分何かのような

$('#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);
   }
});
于 2012-06-26T17:24:31.090 に答える