Chuyển đổi trang mờ sang một neo

Question

Tôi đang cố gắng chuyển tiếp suôn sẻ sang một neo trong một trang. Mục tiêu là khi bạn nhấp vào liên kết trỏ đến neo, trang sẽ biến mất (cuộn) và mờ dần bằng chính neo được gọi.

Tôi có điều này đánh dấu lên, nó mất dần vào/ra một cách chính xác, những thay đổi URL để được gọi là neo, nhưng nó không di chuyển đến gọi là yếu tố

$(document).ready(function() { 
 
    $("a.transition").click(function(event) { 
 
    event.preventDefault(); 
 
    linkLocation = this.href; 
 
    $(".container").fadeOut(500, redirectPage); 
 

 
    }); 
 

 
    function redirectPage() { 
 
    window.location = linkLocation; 
 
    $(".container").fadeIn(500); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div id="A">This is A <a href="#B" class="transition">Go to B</a> 
 
    </div> 
 

 
    ...some large text... 
 

 
    <div id="B" style="margin-top: 3000px;">This is B <a href="#A" class="transition">Go to A</a> 
 
    </div> 
 
</div>

Answer 1

Đây là một sự thay thế sử dụng CSS và đồng bằng vani javascript:

var initialiseFadePageLink = []; 
 

 
function fadePage(i) { 
 
var container = document.getElementsByClassName('container')[0]; 
 
var transitionAnchors = document.getElementsByClassName('transition'); 
 
var current = '#' + transitionAnchors[i].parentNode.getAttribute('id'); 
 
var destination = transitionAnchors[i].getAttribute('href'); 
 

 
transitionAnchors[i].setAttribute('href', current); 
 
container.classList.add('fadeout'); 
 

 
setTimeout(function(){ 
 
window.location.hash = destination; 
 
container.classList.remove('fadeout'); 
 
transitionAnchors[i].setAttribute('href', destination); 
 
}, 1000); 
 

 
} 
 

 

 
function fadePageLinks(i) { 
 
return function(){ 
 
var transitionAnchors = document.getElementsByClassName('transition'); 
 
transitionAnchors[i].addEventListener('click',function(){fadePage(i);},false); 
 
}; 
 
} 
 

 

 
function initialiseFadePageLinks() { 
 
var transitionAnchors = document.getElementsByClassName('transition'); 
 
for (var i = 0; i < transitionAnchors.length; i++) { 
 
initialiseFadePageLink[i] = fadePageLinks(i); 
 
initialiseFadePageLink[i](); 
 
} 
 
} 
 

 
window.addEventListener('load',initialiseFadePageLinks,false);

#B { 
 
margin-top: 3000px; 
 
} 
 

 
.container { 
 
opacity: 1; 
 
transition: opacity 0.5s ease-in-out; 
 
-moz-transition: opacity 0.5s ease-in-out; 
 
-webkit-transition: opacity 0.5s ease-in-out; 
 
} 
 

 
.container.fadeout { 
 
opacity: 0; 
 
}

<div class="container"> 
 
<div id="A">This is A <a href="#B" class="transition">Go to B</a></div> 
 
...some large text... 
 
<div id="B">This is B <a href="#A" class="transition">Go to A</a></div> 
 
</div>

Answer 2

Phần của vấn đề là bạn không chuyển biến số linkLocation đến hàm redirectPage. Rõ ràng nếu linkLocation là một biến toàn cục, bạn có thể truy cập nó bên trong hàm gọi lại, nhưng tôi không chắc đó có phải là ý định của bạn hay không. Bạn có thể sử dụng phương thức .bind() để truyền trực tiếp chức năng đó đến hàm: redirectPage.bind(this, this.href).

Vấn đề thứ hai là bạn không thể cuộn đến phần tử trong vùng chứa ẩn. Hoặc di chuyển đến phần tử trong fadeIn gọi lại, hoặc di chuyển đến nó sau các fadeIn hoạt cảnh bắt đầu:

$("a.transition").click(function(event) { 
 
    event.preventDefault(); 
 
    $(".container").fadeOut(500, redirectPage.bind(this, this.href)); 
 
}); 
 

 
function redirectPage(link) { 
 
    $(".container").fadeIn(500); 
 
    setTimeout(function() { 
 
    window.location = link; 
 
    }, 0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div id="A">This is A <a href="#B" class="transition">Go to B</a> 
 
    </div> 
 

 
    ...some large text... 
 

 
    <div id="B" style="margin-top: 3000px;">This is B <a href="#A" class="transition">Go to A</a> 
 
    </div> 
 
</div>