Я пытаюсь сделать это там, где есть плавный переход между несколькими HTML страницами моего веб-сайта. Я пытаюсь добиться этого, заставляя все, кроме навигационной панели в моем теле, исчезнуть, а затем вернуть эту часть обратно. Часть Fadeout работает нормально, но, когда я пытаюсь снова исчезнуть, содержимое других страниц мгновенно появляется вместо постепенного появления.
Javascript:
$("#MainBody").css('display','none');
jQuery(document).ready(function(){
jQuery("#MainBody").fadeIn('slow',function(){
});
jQuery("a").on('click',function(event){
var thetarget = this.getAttribute('target')
if(thetarget != "_blank"){
var thehref = this.getAttribute('href')
event.preventDefault();
jQuery("#MainBody").fadeOut('slow',function(){
window.location =thehref;
$("#MainBody").fadeIn('slow', function(){
})
});
}
});
});
setTimeout(function(){
$('#MainBody').fadeIn();},1000);
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hakim Ottey's Portfolio</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;1,200;1,400;1,700&display=swap"
rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="JS/script.js"></script>
</head>
<body>
<div class="Header">
<div class="Introduction">
<div class="Intro_Info">
<h1 class="Name">Hakim Ottey</h1>
<h2 class="Title">Game Designer</h2>
</div>
</div>
<div class="Resume">
<h2 class="Download">Download Resume</h2>
</div>
<ul class="Nav_Menu">
<a href="index.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">Home</li>
</div>
</a>
<a href="GD_Projects.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">Game Design Projects</li>
</div>
</a>
<a href="Prog_Projects.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">Programming Projects</li>
</div>
</a>
<a href="3DG_Art.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">3D Game Art</li>
</div>
</a>
<a href="2DG_Art.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">2D Game Art</li>
</div>
</a>
<a href="About_Me.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">About Me</li>
</div>
</a>
<a href="Contacts.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">Contacts</li>
</div>
</a>
</ul>
</div>
<div id="MainBody">
<div class="General_Showcase">
<div class="General_Info">
<!-- first row -->
<ul class="InfoRow">
<li class="infoinline">
<div class="showcase">
<div class="Info">
<h3>Experience</h3>
<ul>
<li class="list_head">
<h4>AI Programmer for robot development</h4>
</li>
<ul>
<li class="list_entry">Created contour recognition for robot</li>
<li class="list_entry"> Managed group milestones and needs </li>
</ul>
<li class="list_head">
<h4>Co-Lead and programmer for Project Techno </h4>
</li>
<ul>
<li class="list_entry">Programmed Loading and Character Select Menu</li>
<li class="list_entry">Re-worked vehicle functionality </li>
</ul>
<li class="list_head">
<h4>Programmer for InternMe App</h4>
</li>
<ul>
<li class="list_entry">Developed Wireframes for app</li>
<li class="list_entry">Programmed screen transitioning and basic functionality
for
the app
</li>
</ul>
</ul>
</div>
</div>
</li>
<li class="infoinline">
<div class="showcase">
<div class="Info">
<h3>Skills</h3>
<ul>
<li class="single_list_entry">2D Asset Creation</li>
<li class="single_list_entry">3d Asset Creation</li>
<li class="single_list_entry">Test Suite Creation</li>
<li class="single_list_entry">Programming in C++, C#, Python, Dart, XAML, and Java
</li>
<li class="single_list_entry">Website Development</li>
<li class="single_list_entry">Unity Engine Development</li>
<li class="single_list_entry">Unreal Engine Development</li>
<li class="single_list_entry">Chatbot Development</li>
<li class="single_list_entry">App Development</li>
<li class="single_list_entry">AI Development</li>
</ul>
</div>
</div>
</li>
<li class="infoinline">
<div class="small_box">
<div class="topspace">
</div>
<div class="Info">
<img class="sm_images" src="Images/Cirlce_Overhead_PNG.jpg">
</div>
</div>
</li>
<li class="infoinline">
<div class="showcase">
<div class="topspace">
</div>
<div class="Info">
<img class="images" src="Images/HO_Wall.png">
</div>
</div>
</li>
</ul>
<!-- second row -->
<ul class="InfoRow">
<li class="infoinline">
<div class="showcase">
<div class="Info">
<h3>Program Experience</h3>
<ul>
<li class="single_list_entry">Microsoft Visual Studio</li>
<li class="single_list_entry">Microsoft Access</li>
<li class="single_list_entry">PHPMyAdmin</li>
<li class="single_list_entry">Adobe Photoshop</li>
<li class="single_list_entry">Adobe Illustrator</li>
<li class="single_list_entry">Adobe Premiere</li>
<li class="single_list_entry">Autodesk 3DSMax</li>
<li class="single_list_entry">Autodesk Maya</li>
<li class="single_list_entry">Unity Engine</li>
<li class="single_list_entry">Unreal Engine</li>
<li class="single_list_entry">Valve Hammer Editor</li>
</ul>
</div>
</div>
</li>
<li class="infoinline">
<div class="showcase">
<div class="Info">
<h3>Languages</h3>
<ul>
<li class="single_list_entry">HTML</li>
<li class="single_list_entry">CSS</li>
<li class="single_list_entry">C#</li>
<li class="single_list_entry">UnityScript</li>
<li class="single_list_entry">Python</li>
<li class="single_list_entry">Dart</li>
<li class="single_list_entry">XAML</li>
<li class="single_list_entry">Java</li>
</ul>
</div>
</div>
</li>
<li class="infoinline">
<div class="small_box">
<div class="Info">
<h3>Engines</h3>
<ul>
<li class="single_list_entry">Construct</li>
<li class="single_list_entry">Unreal Engine</li>
<li class="single_list_entry">Unity Engine</li>
<li class="single_list_entry">Valve Hammer Editor</li>
</ul>
</div>
</div>
</li>
<li class="infoinline">
<div class="showcase">
<div class="Info">
<div class="topspace">
</div>
<iframe class="images" src="https://www.youtube.com/embed/XaqywWdpW4k" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="Footer">
<p class="footinfo">Hakim Ottey © 2019</p>
</div>
</body>
</html>
Это пример того, что есть на других страницах в качестве содержания:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Design Projects | Hakim Ottey's Portfolio</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;1,200;1,400;1,700&display=swap"
rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="JS/script.js"></script>
</head>
<body>
<div class="Header">
<div class="Introduction">
<div class="Intro_Info">
<h1 class="Name">Hakim Ottey</h1>
<h2 class="Title">Game Designer</h2>
</div>
</div>
<div class="Resume">
<h2 class="Download">Download Resume</h2>
</div>
<ul class="Nav_Menu">
<a href="index.html" id="Home">
<div class="inlineNav">
<li class="navbutton">Home</li>
</div>
</a>
<a href="GD_Projects.html" id="GDP">
<div class="inlineNav">
<li class="navbutton">Game Design Projects</li>
</div>
</a>
<a href="Prog_Projects.html" id="PP">
<div class="inlineNav">
<li class="navbutton">Programming Projects</li>
</div>
</a>
<a href="3DG_Art.html" id="3DGA">
<div class="inlineNav">
<li class="navbutton">3D Game Art</li>
</div>
</a>
<a href="2DG_Art.html" id="2DGA">
<div class="inlineNav">
<li class="navbutton">2D Game Art</li>
</div>
</a>
<a href="About_Me.html" id="AboutMe">
<div class="inlineNav">
<li class="navbutton">About Me</li>
</div>
</a>
<a href="Contacts.html" id="Contacts">
<div class="inlineNav">
<li class="navbutton">Contacts</li>
</div>
</a>
</ul>
</div>
<div id="MainBody">
<div class="Table_of_Contents">
<div>
<h3>Contents</h3>
</div>
<a href="" id="Adaptchar">
<div class="PageLink">
<p>Adaptchar</p>
</div>
</a>
<a href="" id="PageLink">
<div class="PageLink">
<p>Project Techno</p>
</div>
</a>
<a href="" id="P2CM">
<div class="PageLink">
<p>Portal 2 Custom Map</p>
</div>
</a>
<a href="" id="Unreal">
<div class="PageLink">
<p>Unreal Target Test</p>
</div>
</a>
<a href="" id="RBA">
<div class="PageLink">
<p>Rockstar Bully Analysis</p>
</div>
</a>
<a href="" i="CM">
<div class="PageLink">
<p>Card Mechanics</p>
</div>
</a>
</div>
<div class="GDBody">
<div class="Portblock">
<div class="PortPres">
<div class="PortObjname">
<h2>Adaptchar</h2>
</div>
<div class="PortPicBox">
<iframe class="PortPic" src="https://www.youtube.com/embed/CBCdtNp6UU0" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Adaptchar</h2>
</div>
<div class="PortExpl">
<p>By using Adaptchar, players playing role-playing games will be able to have their party grow
and
adapt to
how the
player wants to play the game. Using an Artificial Neural Network, players could either play
normally or
configure the weights of the ANN in order to teach the bots to make decisions that can
benefit
how
the
player
playstyle.</p>
</div>
</div>
</div>
<div class=Portblock>
<div class="PortPres">
<div class="PortObjname">
<h2>Project Techno</h2>
</div>
<div class="PortPicBox">
<iframe class="PortPic" src="https://www.youtube.com/embed/GxmuPkdXDzA" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Project Techno</h2>
</div>
<div class="PortExpl">
<p>Worked with the lead of Project Techno to develop the loading screen, the UI for the
Character
Select and
End of
Level Screens, and functionality of the game's main vehicle. This was a team effort, with me
being one
of the
programmers for the project.</p>
</div>
</div>
</div>
<div class="Portblock">
<div class="PortPres">
<div class="PortObjname">
<h2>Portal 2 Custom Map</h2>
</div>
<div class="PortPicBox">
<iframe class="PortPic" src="https://www.youtube.com/embed/r52zQmvZ4L0" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Portal 2 Custom Map</h2>
</div>
<div class="PortExpl">
<p>Using Valve's Hammer Editor, I created a custom map for Portal 2 that called for the player
to
use
alternate
means to catch objects and to reach different parts of the map. Also made a tutorial on
making
custom
brush
shapes within the editor.</p>
</div>
</div>
</div> -->
<div class="Portblock">
<div class="PortPres">
<div class="PortObjname">
<h2>Unreal Target Test</h2>
</div>
<div class="PortPicBox">
<iframe class="PortPic" src="https://www.youtube.com/embed/itt-z1gIYxY" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Unreal Target Test</h2>
</div>
<div class="PortExpl">
<p>Using Unreal Engine Blueprint, I created a target inlineNav map that had parts of the map
changing and
the
targets following a determined path.</p>
</div>
</div>
</div>
<div class="Portblock">
<div class="PortPres">
<div class="PortObjname">
<h2>Rockstar Bully Analysis/Other Blogs</h2>
</div>
<div class="PortPicBox">
<iframe class="PortPic"
src="https://docs.google.com/document/d/e/2PACX-1vQ--lYr9hisdK0AR5Vze8K9hldvgLg6EL8VhxnSyf2KaBBefB7-45DMnSH19fM0jk39mmECs4KTCd1M/pub?embedded=true"></iframe>
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Blogs</h2>
</div>
<div class="PortExpl">
<p>Studied the design of Bully's tutorial level and broke it down for an audience of possible
Game
Design
Students. Did this for other games as well, such as Don't Starve and Uncharted.</p>
</div>
</div>
</div>
<div class="Portblock">
<div class="PortPres">
<div class="PortObjname">
<h2>Card Mechanics and Art for Bring Them To The Festival</h2>
</div>
<div class="PortPicBox">
<img class="PortPicSmall" src="Images/Card1.png">
<img class="PortPicSmall" src="Images/Card2.png">
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Card Mechanics and Art</h2>
</div>
<div class="PortExpl">
<p>Integrated a way to use cards for the Board Game called Bring Them To The Festival. Also,
created
the
card
art by using a mixture of Photoshop and Illustrator. Development on Bring Them To The
Festival
was a
team
effort, with me being the card artist of the team. </p>
</div>
</div>
</div>
</div>
</div>
<div class="Footer">
<p class="footinfo">Hakim Ottey © 2019</p>
</div>
</body>
</html>