Fade in and out between divs
Question
I have but zero appitude to code anything. I am trying to build a small simple website and am almost done but have one little issue left to solve. I know this has been asked here before and I have tried to figure out how to make there circumstance work for me but can't. I have even tried the easy jquery fade in and fade out methods but can't get the id's correct or something? All I want to do is fade in and out between the divs when the links are clicked. I have tried and reviewed many examples here and still can't get it to connect at all.
Any help would be appreciated.
I have three links on a page that loads three different divs into a container. Everything is on the same page and everything works great other than I can't get them to fade in and out when the links are clicked. I have no problem loading the jquery library and doing it that way if that works best.
<head>
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container'+idInfo).style.display = 'block';
}
</script>
<style type="text/css">
#container1, #container2, #container3 {
display:none;
overflow:hidden;
background-color: #E6E1E6
</style>
</head>
<body style="background-color: #E6E1E6">
<div id="container" style="position: fixed; width: 100%; z-index: 200;" >
<div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
<a href="#" onclick="showDiv('1');return false" style="margin-right: 10px">The Original Woman</a>
<a href="#" onclick="showDiv('2');return false" style="margin-right: 10px; margin-left: 10px">CREDIT</a>
<a href="#" onclick="showDiv('3');return false" style="margin-left: 10px">CONTACT</a>
</div>
</div>
<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
<div id="container1" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 60%"> </td>
<td class="auto-style1" style="width: 40%">
<img height="auto" src="asencio%20(7).jpg" width="100%" /> </td>
</tr>
</table>
</div>
<div id="container2" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 50%">
<img height="auto" src="mukai.jpg" width="100%" /> </td>
<td style="width: 50%"> </td>
</tr>
</table>
</div>
<div id="container3" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 37%">
<img height="auto" src="pandora_by_alifann.jpg" width="100%" /> </td>
<td style="width: 62%"> </td>
</tr>
</table>
</div>
<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>
</div>
</body>
</html>
3 answers
solution1
1 2014-12-12 05:20:14
You mentioned using jQuery, this is a basic idea. Comments in code should explain what is happening. I altered the HTML a little by adding some classes and some data attributes.
$("#linkDiv").on("click", "a", function(evt) { //use event bubbling so there is only one click hanlder evt.preventDefault(); //stop click event var anchor = $(this); //get the link that was clicked on if (anchor.hasClass("active")) { //If has the class, it is already is active, nothing to do return; } anchor.siblings().removeClass("active"); //find previous selectd link and unselect it anchor.addClass("active"); //add class to current link and select it var showTab = anchor.data("tab"); //read the data attribute data-tab to get item to show var visibleContainer = $(".tab-container:visible"); var complete = function() { //function to call when fade out is complete $(showTab).stop().fadeIn(300); }; if (visibleContainer.length) { //make sure w have something to hide $(visibleContainer).stop().fadeOut(100, complete); //if we do, fade out the element, when finished, call complete } else { complete(); //if first time, just show it } }).find("a").eq(0).trigger("click"); //click on first link to load tab content.
.tab-container { display: none; overflow: hidden; } #container1 { background-color: #E60000; } #container2 { background-color: #00E100; } #container3 { background-color: #0000E6; } a.active { background-color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="container" style="position: fixed; width: 100%; z-index: 200;"> <div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;"> <a href="#" style="margin-right: 10px" data-tab="#container1">The Original Woman</a> <a href="#" style="margin-right: 10px; margin-left: 10px" data-tab="#container2">CREDIT</a> <a href="#" style="margin-left: 10px" data-tab="#container3">CONTACT</a> </div> </div> <!-- The 4 container content divs. --> <div id="divLinks" style="width: 100%; height: 100%"> <div id="container1" class="tab-container" style="position: fixed; width: 100%; height: auto;"> <table cellpadding="0" cellspacing="0" style="width: 100%"> <tr> <td style="width: 60%"> </td> <td class="auto-style1" style="width: 40%"> <img height="auto" src="asencio%20(7).jpg" width="100%" /> </td> </tr> </table> </div> <div id="container2" class="tab-container" style="position: fixed; width: 100%; height: auto;"> <table cellpadding="0" cellspacing="0" style="width: 100%"> <tr> <td style="width: 50%"> <img height="auto" src="mukai.jpg" width="100%" /> </td> <td style="width: 50%"> </td> </tr> </table> </div> <div id="container3" class="tab-container" style="position: fixed; width: 100%; height: auto;"> <table cellpadding="0" cellspacing="0" style="width: 100%"> <tr> <td style="width: 37%"> <img height="auto" src="pandora_by_alifann.jpg" width="100%" /> </td> <td style="width: 62%"> </td> </tr> </table> </div>
solution2
0 2014-12-12 05:20:28
Here is some quick script to do the fading, but i would suggest you to use jQuery for same since it will be cross-browser.
Just update your script block, and it will work, no need to change any other code
Vanilla JS
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
fadeIn(document.getElementById('container'+idInfo), 20);
}
function fadeIn(element, duration) {
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
//alert("here");
}, duration);
}
</script>
Using jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function showDiv(idInfo) {
$('#divLinks div').hide(200, function(){
//Show the clicked
$('#container'+idInf).fadeIn(200);
});
}
</script>
solution3
0 2014-12-12 05:20:52
Here's a simple example using jQuery - Not sure what you're end product is meant to look like but this should set you on the right foot.
Here's a sample snippet of the JS:
$(document).ready(function(){ //Wait for DOM to finish loading
$('.navigation a').click(function(){ //When the a link is clicked
var id = $(this).attr('href'); //grab its href as the ID of the target object
$('.hidden-content').fadeOut(500); //Fade out all the divs that are showing
$(id).fadeIn(500); //Fade in the target div
return false; //Prevent the default action of the a link
});
});
Check out the jsFiddle here: http://jsfiddle.net/pavkr/7vc2jj5j/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.