2016-09-23 3 views
0

Я схожу с ума, чтобы попытаться решить эту проблему.Обновить позицию div после jquery fadein?

Я работаю над парлаллакским hompage. Когда я нажимаю на ссылку в меню, страница прокручивается до тех пор, пока она не достигнет целевого div (я использовал posittion(). Top и попробуйте также offset(). Top)

Но в середине страницы ther's a элемент, который появляется с анимацией fadein(), и fadein перемещает элементы нижних позиций, поэтому теперь, когда я снова нажимаю на одну из ссылок в меню position(), верхние точки указывают на старую позицию div.

Я не знаю, с чего начать искать, какие-либо предложения?

это код, который не работает после FadeIn анимации:

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; 
     }); 
    } 
    } 
}); 
+2

предложение: показать нам ваш текущий код, что вы пробовали до сих пор. мы поможем вам с чем-то поработать над – kosmos

+0

, что, по словам космос, было правдой. – Fiido93

ответ

0

Я думаю, что это то, что вы ожидали. см. рабочую демонстрацию. Надеюсь, это поможет вам.

$(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>