在div之间淡入和淡出

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? 我什至尝试了简单的jquery淡入和淡出方法，但无法获取ID的正确信息或其他内容？ All I want to do is fade in and out between the divs when the links are clicked. 我要做的就是单击链接后在div之间淡入和淡出。 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. 我在页面上有三个链接，可将三个不同的div加载到一个容器中。 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. 如果最有效，加载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%">&nbsp;</td>
             <td class="auto-style1" style="width: 40%">
             <img height="auto" src="asencio%20(7).jpg" width="100%" />&nbsp;</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%" />&nbsp;</td>
                <td style="width: 50%">&nbsp;</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%" />&nbsp;</td>
             <td style="width: 62%">&nbsp;</td>
         </tr>
     </table>
    </div>

<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>    

</div>


</body>

</html>

Answer 1

You mentioned using jQuery, this is a basic idea. 您提到使用jQuery，这是一个基本概念。 Comments in code should explain what is happening. 代码注释应说明正在发生的事情。 I altered the HTML a little by adding some classes and some data attributes. 我通过添加一些类和一些数据属性对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%">&nbsp;</td> <td class="auto-style1" style="width: 40%"> <img height="auto" src="asencio%20(7).jpg" width="100%" />&nbsp;</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%" />&nbsp;</td> <td style="width: 50%">&nbsp;</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%" />&nbsp;</td> <td style="width: 62%">&nbsp;</td> </tr> </table> </div>

Answer 2

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. 这是一些执行褪色的快速脚本，但是我建议您使用jQuery ，因为它会跨浏览器。

Just update your script block, and it will work, no need to change any other code 只需更新您的脚本块，它就可以工作，无需更改任何其他代码

Vanilla JS 香草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 使用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>

Answer 3

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. 这是一个使用jQuery的简单示例-不确定最终产品的外观是什么样子，但这应该会使您立于不败之地。

Here's a sample snippet of the JS: 这是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/ 在此处查看jsFiddle： http ： //jsfiddle.net/pavkr/7vc2jj5j/

在div之间淡入和淡出

问题描述

3 个解决方案

解决方案1
1 2014-12-12 05:20:14

解决方案2
0 2014-12-12 05:20:28

解决方案3
0 2014-12-12 05:20:52

在div之间淡入和淡出

问题描述

3 个解决方案

解决方案1 1 2014-12-12 05:20:14

解决方案2 0 2014-12-12 05:20:28

解决方案3 0 2014-12-12 05:20:52

解决方案1
1 2014-12-12 05:20:14

解决方案2
0 2014-12-12 05:20:28

解决方案3
0 2014-12-12 05:20:52