切换div之间的衰落效应

Question

我使用http://tympanus.net/Development/PageTransitions/作为我的主页，下面的代码在一个页面中用于展示其他不同的内容信息。编码的所有页面都在一个索引文件中。

以下代码用于在div之间切换。 我尝试使用简单的javascript onclick使页面fadeIn / fadeOut但它无法工作。

jQuery的：

<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';
}
$("#fade").click(function () {
    $('#container1').fadeOut('slow');
    $('#container2').fadeIn('slow');
});
</script>

CSS：

<style type="text/css">
#container1, #container2, #container3 {
    display:none;
    width:100%;
    height:auto;
}
</style>

HTML：

<a href="#" id="fade" onclick="return showDiv('1')"><img src="img/thumbnail1.png" /><br>click to see content 1</a>
<a href="#" id="fade2" onclick="return showDiv('2')"><img src="img/thumbnail2.png" /><br>click to see content 2</a>
<a href="#" id="fade3" onclick="return showDiv('3')"><img src="img/thumbnail3.png" /><br>click to see content 3</a>

<div id="container1">content1</div>
<div id="container2">content2</div>
<div id="container3">content3</div>

单击链接后只需要.onclick淡入淡出效果即可工作。 非常感谢提前！

Answer 1

我认为这就是你的目标：

Online Demo

HTML：

<div class="links">
    <a href="#" data-toggle="1">click to see content 1</a>
    <a href="#" data-toggle="2">click to see content 2</a>
    <a href="#" data-toggle="3">click to see content 3</a>
</div>

<div class="content-divs">
 <div>content0</div>
 <div>content1</div>
 <div>content2</div>
</div>

JavaScript的：

$(".links a").click(function () {
    var id = $(this).data('toggle');
    showDiv(id);
});  

function showDiv(id) {
    // hide all other
    var divs = $('.content-divs');
    divs.children().each(function(index) {
        $(this).hide();   
    });
    // fade the correct one in.
    divs.children('div:nth-child('+id+')').fadeIn();                      
}

相同的CSS。 由于您已经在使用jQuery，为什么不使用它的所有功能？

你可以用onclick =＆＃34; showDiv（id）＆＃34;来做到这一点，但是jsfiddle不适用，所以.data（＆＃39; toggle＆＃39;）是一个不错的解决方法。 / p>

Answer 2

看起来你可能会让它变得更加复杂然后需要，尝试一下：

<script type="text/javascript">
   $(document).ready(function(){
      var curr = 1

      $('.fader').click(function(){
         var next_attr = $(this).data('num');

         if(curr != next_attr){
            $('div[data-num="'+curr+'"]').hide(1000, function(){ 
               $('div[data-num="'+next_attr+'"]').show(1000); 
            });

            curr = next_attr
         }
      });
   });
</script>

这是html

<div class="links">
   <a class=".fader" data-num="1">Show Container 1</a>
   <a class=".fader" data-num="2">Show Container 2</a>
   <a class=".fader" data-num="3">Show Container 3</a>
</div>

<div class="containers">
   <div id="container1" data-num="1">Container 1</div>
   <div id="container2" data-num="2">Container 2</div>
   <div id="container3" data-num="3">Container 3</div>
</div>

这是css

#container2, #container3{
    display:none;
    width:100%;
    height:auto;
}

这应该使您能够通过单击与其对应的链接在3个容器之间切换。我使用数据属性将容器链接到那里的链接。当单击一个链接时，它会查找具有相同data-num的div，并在淡出它时淡出当前的一个，然后淡入新的一个并设置curr变量。

Answer 3

你可以在纯CSS中实现这一点。 （IE 8不支持）

http://jsbin.com/eVeNeSO/1/edit

CSS ：

body {
   background-image: url(data:image/png;base64,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);
   background-color: #001;
}

/* Header Styling and Positioning */
#container ul {
   list-style:none;
   margin: 2em 0;
   padding: 0;
   text-align: center;
   font-size: 1.5em;
}

   #container li {
      display: inline;
      margin: 0 1em;
   }

   #container li a {
      margin: 0 1em;
      color: #09b;
      text-decoration: none;
      background: #333;
      padding: .6em;
      border-radius: 25em;
   }

   #container li a:hover {
      color: #099;
      background: #444;
   }

   #container li a:active {
      color: #066;
      background: #222;
   }

/* Content Area */
.content div {
   width: 50%;
   margin: 2em auto;
   padding: 1em;
   background: #333;
   border: 1em solid #555;
   color: #fff;
}

/* hide unselected targets */
.content div:not(:target) {
   display: none;
}
/* display selected target */
:target {
   display: inherit;
}

HTML ：

<article id="container">
    <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#services">Services</a></li>
    </ul>

    <div class="content">
        <div id="about">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at feugiat odio. Proin sit amet eros ac diam tempus tempor. Fusce gravida ut nisi in consectetur. Sed hendrerit sapien id metus adipiscing, id vehicula lacus fermentum. Proin mollis facilisis erat, eu sollicitudin diam scelerisque ut. Phasellus non mollis nisl. Vestibulum ac mi quis metus mollis fermentum. Donec pharetra consequat lacinia. Vestibulum porta tortor purus, non fermentum turpis congue eget. Nulla varius augue dolor, at pellentesque diam volutpat in. Vestibulum vitae ligula eu eros tristique accumsan. Mauris sagittis iaculis lorem id egestas. Suspendisse potenti. Cras faucibus dolor turpis, ac ultrices dolor rhoncus a.

        <p>Etiam aliquam magna vitae hendrerit accumsan. Nam venenatis risus a tempor semper. Nullam ac est nec dolor pellentesque laoreet ac ac nisi. Ut sit amet magna nunc. Vestibulum orci ipsum, pretium nec venenatis vel, lacinia et magna. Proin dignissim dui ligula, eget pretium nisl ultrices eu. Etiam sit amet nunc non nisl scelerisque dignissim a sed sapien.</p>

        <p>Quisque auctor sit amet mi sed porta. Fusce nec erat eros. Suspendisse et diam sit amet quam pretium sollicitudin quis nec enim. Nam fermentum risus dui, non volutpat dolor pellentesque nec. Quisque interdum, neque eu feugiat hendrerit, risus augue malesuada mauris, non vestibulum ante erat quis purus. Nunc scelerisque sapien vel leo bibendum, vel dapibus ipsum ultricies. Cras commodo lacus quis nunc eleifend iaculis. Nam adipiscing ipsum non justo ultrices, sit amet vestibulum urna vehicula. Praesent porttitor neque et dictum euismod. Aliquam erat volutpat. Nam adipiscing, neque ut dictum ultricies, dui odio aliquet dui, ac rhoncus neque nulla a enim.</p>
        </div>
        <div id="contact">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut purus leo, varius pellentesque vestibulum at, lobortis quis est. Suspendisse mattis leo vel eros faucibus adipiscing. Phasellus sed nisl eu lectus blandit dignissim vel id nibh. Donec rutrum felis urna, sed elementum urna venenatis quis. Praesent vel tortor sed felis sodales lobortis eget eget nulla. Aliquam bibendum elit eu nunc facilisis, varius tempor lectus mattis. Aenean sed aliquet orci. Aliquam viverra molestie ultrices.

        <p>Nullam luctus imperdiet risus, vel convallis massa interdum id. In ultricies pulvinar libero vitae sodales. Fusce eleifend varius tincidunt. Nulla sed blandit nibh. Ut sollicitudin, metus et sagittis tincidunt, nisl felis ultricies ante, eu dapibus massa odio sed nunc. Pellentesque semper eros dui, ac mollis nunc dictum non. Quisque ultrices sapien at velit pellentesque, at lacinia est commodo. Morbi commodo in neque eu tempor. Curabitur eu mattis diam, eu tristique mauris.</p>

        <p>Suspendisse sit amet lacus rutrum, faucibus augue vitae, euismod nibh. Mauris aliquet nisi in nibh aliquam, et ullamcorper turpis mattis. Vestibulum ut hendrerit libero, eu ultricies odio. Etiam sodales vehicula dignissim. Vestibulum libero tellus, luctus sed imperdiet quis, malesuada sed nunc. In aliquet pellentesque erat pellentesque fringilla. Aenean egestas ipsum eu nunc auctor, nec vestibulum est varius. Integer convallis, orci sit amet sagittis hendrerit, purus ligula dictum dolor, in lobortis ligula lacus pulvinar lorem. Sed pulvinar porttitor egestas. Duis ac ante ipsum. Donec sem odio, sollicitudin in fermentum egestas, gravida sed diam. Nam condimentum augue ut ligula dapibus sodales. Donec blandit sem non cursus aliquam.</p>
        </div>
        <div id="services">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus posuere porta suscipit. In ac purus quis lectus blandit rutrum eu vitae nisi. Nunc vel ante at enim imperdiet ultrices et non erat. Vestibulum sagittis facilisis nulla. Ut quis turpis sit amet enim volutpat tincidunt. Vivamus vel ornare neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis tincidunt mi et ipsum cursus, vitae tincidunt ipsum fringilla. Integer eu mollis elit, in tincidunt neque.

        <p>Maecenas ac est gravida, iaculis mauris vitae, tempus enim. Mauris ut nisi dapibus, commodo massa sed, iaculis augue. Cras sit amet leo libero. Mauris ac dui lorem. Aenean velit risus, ornare molestie neque ac, feugiat cursus tellus. Duis commodo lacinia felis, vitae aliquam mauris consectetur cursus. Donec arcu orci, sollicitudin eu lacus id, ultricies sollicitudin ligula. Vivamus ac egestas ipsum. Duis aliquam suscipit tristique. Vestibulum aliquet bibendum arcu, in adipiscing arcu sagittis ut. Aenean in leo risus. Morbi vitae nibh in eros accumsan consequat in ac lacus. Maecenas pretium mattis justo non euismod. Sed vel velit sollicitudin, posuere mi nec, dictum lectus.</p>

        <p>Nullam nisl nisi, dignissim ultrices cursus id, aliquet vel purus. Praesent velit purus, pharetra id eros id, viverra ultricies velit. Phasellus sed lacinia neque, at dictum odio. Mauris eget accumsan augue, ac imperdiet magna. Proin commodo sem id purus vulputate mollis. Nunc a dignissim urna. Nam facilisis, lectus sit amet blandit egestas, velit tortor imperdiet massa, eu elementum lorem dolor nec diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus sit amet nisl turpis. Nulla vel nulla ut odio feugiat ultrices. Ut id consequat sem.</p>
        </div>
    </div>
</article>