在div之间淡入和淡出
[英]Fade in and out between divs
问题描述
我对任何东西的编码只有零度。 我正在尝试建立一个小型的简单网站，并且差不多完成了，但是还有一个小问题需要解决。 我知道在此之前已经有人问过这个问题，并且我试图弄清楚如何使这种情况对我有用，但不能解决。 我什至尝试了简单的jquery淡入和淡出方法，但无法获取ID的正确信息或其他内容？ 我要做的就是单击链接后在div之间淡入和淡出。 我在这里尝试并查看了许多示例，但仍然无法完全连接。
任何帮助，将不胜感激。
我在页面上有三个链接，可将三个不同的div加载到一个容器中。 一切都在同一页面上，并且一切正常，除了单击链接时我无法让它们淡入和淡出。 如果最有效，加载jquery库并以这种方式执行时我没有问题。
<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 个解决方案
解决方案1
1 2014-12-12 05:20:14
您提到使用jQuery，这是一个基本概念。 代码注释应说明正在发生的事情。 我通过添加一些类和一些数据属性对HTML进行了一些改动。
$("#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>
解决方案2
0 2014-12-12 05:20:28
这是一些执行褪色的快速脚本，但是我建议您使用jQuery ，因为它会跨浏览器。
只需更新您的脚本块，它就可以工作，无需更改任何其他代码
香草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>
使用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>
解决方案3
0 2014-12-12 05:20:52
这是一个使用jQuery的简单示例-不确定最终产品的外观是什么样子，但这应该会使您立于不败之地。
这是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
});
});
在此处查看jsFiddle： http ： //jsfiddle.net/pavkr/7vc2jj5j/
jQuery在div之间淡入/淡出
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.