jquery淡入淡出後更新div的位置？

我正在處理parlallax的主頁。當我點擊菜單上的一個鏈接時，頁面向下滾動，直到它到達目標div（我使用了posittion（）。top並嘗試偏移（））頂部）

但是在頁面中間，元素，顯示與fadein（）動畫和淡入淡出移動下面的位置元素，所以現在當我再次點擊菜單中的位置（）頂部指向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

什麼是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淡入淡出後更新div的位置？

回答

相關問題