Javascript jQuery fadeIn，然后移动到div

我正在尝试创建函数，该函数在单击时淡入

div

，然后应该移到该

div

。但它不起作用，第一次单击div就会出现，我必须再单击一次才能移动到那里。 有人能帮帮我吗？

$（文档）.ready（函数（）{
$（'.showDetail'）。单击（函数（）{
$（'princip detail'）.fadeIn（）；
if（location.pathname.replace（/^\/，''）==this.pathname.replace（/^\/，''）和&location.hostname==this.hostname）{
var target=$（this.hash）；
target=target.length？target:$（'[name='+this.hash.slice（1）+']'）；
if（目标长度）{
$（'html，body'）。设置动画({
scrollTop:target.offset（）.top
}, 1000);
返回false；
}
}
});
});

使用

e.preventDefault（）防止您单击的锚的默认操作。不要忘记包含jQuery库。运行下面的代码段以查看其运行情况：


$（文档）.ready（函数（）{
$（'.showDetail'）。单击（函数（e）{
e、 预防默认值（）；
$（'princip detail'）.fadeIn（）；
if（location.pathname.replace（/^\/，''）==this.pathname.replace（/^\/，''）和&location.hostname==this.hostname）{
var target=$（this.hash）；
target=target.length？target:$（'[name='+this.hash.slice（1）+']'）；
if（目标长度）{
$（'html，body'）。设置动画({
scrollTop:target.offset（）.top
}, 1000);
返回false；
}
}
});
});
#原则{
宽度：100%；
高度：自动；
最小高度：100%；
背景：url（'main-bg.jpg'）无重复中心；
背景尺寸：封面；
位置：绝对位置；
排名：0；
左：0；
溢出：隐藏；
z指数：20；
}
#普林西比细部{
宽度：100%；
位置：绝对位置；
最高：100%；
左：0；
高度：自动；
最小高度：100%；
背景：#f00url（“page bg.jpg”）无重复中心；
溢出：隐藏；
显示：无；
}


133131321212121323232323
#原则{
宽度：100%；
高度：自动；
最小高度：100%；
背景：url（'main-bg.jpg'）无重复中心；
背景尺寸：封面；
位置：绝对位置；
排名：0；
左：0；
溢出：隐藏；
z指数：20；
}
#普林西比细部{
宽度：100%；
位置：绝对位置；
最高：100%；
左：0；
高度：自动；
最小高度：100%；
背景：url（“page bg.jpg”）无重复中心；
溢出：隐藏；
显示：无；
}
$（文档）.ready（函数（）{
$（'.showDetail'）。单击（函数（）{
var curLink=this.hash；
$（curLink）.fadeIn（1000，函数（）{
var offset=$（curLink）.offset（）.top；
$（'html，body'）。设置动画({
滚动顶：偏移量
}, 1000);
});
});
});

Fiddler
创建一个JSFIDLE请我们缺少一部分代码来帮助您：/@Baldráni更新，链接在帖子中
<a href="#princip-detail" class="showDetail">Continue</a>


        <script>
            $(document).ready(function() {
                $('.showDetail').click(function() {
                    $('#princip-detail').fadeIn();
                    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

                        var target = $(this.hash);
                        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                        if (target.length) {
                            $('html,body').animate({
                                scrollTop: target.offset().top
                            }, 1000);
                            return false;
                        }
                    }
                });
            });
        </script>

<div id="principy">
  <div class="princip-topleft">
    <h2><a href="#princip-detail" class="showDetail">Continue</a></h2></div>

</div>

<div id="princip-detail">
  133131321212121323232323
</div>

#principy {
  width: 100%;
  height: auto;
  min-height: 100%;
  background: url('main-bg.jpg') no-repeat center center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 20;
}

#princip-detail {
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  height: auto;
  min-height: 100%;
  background: url("page-bg.jpg") no-repeat center center;
  overflow: hidden;
  display: none;
}

   $(document).ready(function() {
              $('.showDetail').click(function() {
                var curLink = this.hash;
                $(curLink).fadeIn(1000, function() {
                  var offset = $(curLink).offset().top;
                  $('html,body').animate({
                    scrollTop: offset
                  }, 1000);

                });
              });
            });