Question

我疯了，试图解决这个问题。

我在parlallax上工作。当我点击菜单上的链接时，页面向下滚动直到它到达目标div（我使用了posittion（）。top并尝试offset（）。top）

但是在页面的中间是一个显示fadein（）动画的元素，并且fadein移动下面的位置元素，所以现在当我再次点击菜单中的一个链接时（）.top指向div的旧位置。

我不知道从哪里开始寻找，有什么建议吗？

这是在淡入淡出动画之后不起作用的代码：

jQuery('a[href*=#]').each(function() {

  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
      location.hostname == this.hostname &&
      this.hash.replace(/#/, '')) {
    var jQuerytargetId = jQuery(this.hash),
        jQuerytargetAnchor = jQuery('[name=' + this.hash.slice(1) + ']');
    var jQuerytarget = jQuerytargetId.length ? jQuerytargetId : jQuerytargetAnchor.length ? jQuerytargetAnchor : false;

    if (jQuerytarget) {
      var targetOffset = jQuerytarget.offset().top; //alrady try position().top

      jQuery(this).click(function() {
        jQuery("#nav li a").removeClass("active");
        jQuery(this).addClass('active');
        jQuery('html, body').animate({
          scrollTop: targetOffset
        }, 1000);
        return false;
      });
    }
  }
});

Answer 1

我认为这是你所期待的。参考工作演示。希望这对你有所帮助。

＆＃13;

$(document).ready(function() {
  var the_ul_length = $("div.maindiv ul li").length;
  for (var i = 0; i < the_ul_length; i++) {
    var the_class = $("div.maindiv ul li#i" + i).attr('class');
    if (the_class == "show") {
      $("div.maindiv ul li#i" + i).show(500);
    } else {
      $("div.maindiv ul li#i" + i).hide(500);
    }
  }
});

$("div.maindiv").mouseenter(function() {
  $("div.maindiv ul li").slideDown();
});

$("div.maindiv ul li a").click(function(e) {
  e.preventDefault();
  var the_parent_id = $(this).parent().attr('id');
  $("div.maindiv ul li#" + the_parent_id).attr('class', 'show');
  $("div.maindiv ul li[id!=" + the_parent_id + "]").attr('class', 'nshow');

  var the_ul_length = $("div.maindiv ul li").length;
  for (var i = 0; i < the_ul_length; i++) {
    var the_class = $("div.maindiv ul li#i" + i).attr('class');
    //alert(the_class);
    if (the_class == "show") {
      $("div.maindiv ul li#i" + i).show();
    } else {
      $("div.maindiv ul li#i" + i).hide();
    }
  }
});

＆＃13;

div.maindiv {
  width: 100px;
  height: auto;
}
div.maindiv ul li {
  list-style-type: none;
  background-color: black;
  width: 100px;
  text-align: center;
  border: 1px solid orange;
  padding: 2px;
}
div.maindiv ul li a {
  text-decoration: none;
  font-size: 20px;
  color: orange;
  font-family: monospace;
}
div.maindiv ul li {
  display: none;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>

  <div class="maindiv">
    <ul>
      <li id="i0" class="show"><a href="">Home</a>
      </li>
      <li id="i1" class="nshow"><a href="">AboutUs</a>
      </li>
      <li id="i2" class="nshow"><a href="">Contact</a>
      </li>
      <li id="i3" class="nshow"><a href="">Hello</a>
      </li>
    </ul>
  </div>

</body>

</html>

＆＃13;

在jquery fadein之后更新div位置？

1 个答案: