jquery fadeinの後にdiv位置を更新しますか？

私はこの問題を解決しようと夢中になります。jquery fadeinの後にdiv位置を更新しますか？

私はparlallax hompageに取り組んでいます。メニューのリンクをクリックすると、ページがターゲットdivに到達するまでスクロールします（私はposittion（）を使い、offset（）を使って上に移動します）

しかし、ページの真ん中では、 fadein（）アニメーションで表示される要素とfadeinは、以下の位置要素を移動するので、メニュー内のリンクの1つを再度クリックすると、position（）。divは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; 
     }); 
    } 
    } 
});

出典

2016-09-23 Clorge32

提案：私たちは、あなたがこれまで試したどのようなあなたの現在のコードを示します。 – kosmos

についてコスモスが言うことが真実であると私たちはあなたに何か助けてくれるでしょう。 – Fiido93

私は、これはあなたが期待するものだと思います。作業デモを参照してください。これがあなたに役立つことを願っています。

$(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(); 
 
    } 
 
    } 
 
});

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; 
 
}

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

出典

2016-09-23 12:18:16

jquery fadeinの後にdiv位置を更新しますか？

答えて

関連する問題