디스플레이 전환시 전환 효과 : 없음 - 표시 : 블록

Question

디스플레이에서 전환 할 때 페이드 인/페이드 아웃 효과를 추가하려고합니다. 표시하지 않음 : 블록 및 그 반대로합니다. 이 코드 나는이된다

자바 스크립트 :

function showDiv(idInfo) { 
var sel = document.getElementById('contentDivs').getElementsByClassName('x'); 
for (var i=0; i<sel.length; i++) { 
    sel[i].style.display = 'none'; 
} 
document.getElementById('content'+idInfo).style.display = 'block'; 
} 
window.onload = function() {showDiv('1');} 

HTML/PHP :이 수를 만드는 방법에 대한

<div id="menu"> 
    <ul> 
     <a href='' onclick='showDiv("1");return false'><li>Button 1</li></a> 
     <a href='' onclick='showDiv("2");return false'><li>Button 2</li></a> 
     <a href='' onclick='showDiv("3");return false'><li>Button 3</li></a> 
    </ul> 
</div> 

<div id="contentDivs"> 
<?php 
    for($i=1;$i<=3;$i++){ 
     echo(' 
     <div id="content'.$i.'" class="x"> 
      <div id="box1"> 
       <p>Text '.$i.'</p> 
      </div> 
      <div id="box2"> 
       <table> 
        <tr> 
         <td>Content '.$i.'</td> 
         <td>Content '.$i.'</td> 
         <td>Content '.$i.'</td> 
        <tr> 
       </table> 
      </div> 
     </div>'); 
    }?> 
</div> 

어떤 아이디어? 여러 가지 시도를했지만 올바른 방법을 찾아 낼 수 없습니다. 도움을 주시면 감사하겠습니다.

감사합니다.

Answer 1

이 작업을 수행하는 기본 방법은 없습니다. CSS3의에게 opacity 속성을 사용하여 약간 다른 방법으로이 일을 몇 가지 방법이 있습니다

첫째, 당신이 active 클래스를 추가하는 CSS 선언과 CSS3 전환 추가 : 다음

#menu ul a { 
    opacity: 1; 
    -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */ 
    transition: opacity 1s; 
} 

#menu ul a.inactive { 
    opacity: 0; 
    -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */ 
    transition: opacity 1s; 
} 

을 자바 스크립트에 inactive 클래스를 추가하십시오. 또한 1 초 후 a을 display: none으로 변경하십시오.

function showDiv(idInfo) { 
    var newId = 'content' + idInfo; 
    var sel = document.getElementById('contentDivs').getElementsByClassName('x'); 
    for (var i=0; i<sel.length; i++) { 
     // Fade In all our currently viewable divs 
     sel[i].className += 'inactive'; 
     // If this is NOT our new div, hide after 1 second (transition time) 
     if (sel[i].id !== newId) 
      setTimeout(function() { 
       sel[i].style.display = 'none'; 
      }, 1000); 
     } 
    } 
    var newEl = document.getElementById(newId); 
    // Make sure our new element is being displayed 
    newEl.style.display = 'block'; 
    // Add the `inactive` class in order to make the opacity 0 
    newEl.className += 'inactive'; 
    setTimeout(function() { 
     // Remove the `inactive` className in order to trigger the fade in 
     newEl.className = ''; 
    }, 0); 
} 
window.onload = function() {showDiv('1');} 

또한 자바 스크립트 (NO CSS 필수)와 함께이 작업을 수행 할 수 있습니다 : 요소와 요소의 전환의 디스플레이가 동일한 프레임에 시작하면

function showDiv(idInfo) { 
    var newId = 'content'+idInfo; 
    var $elements = $('#contentDivs').find('.x'); 
    $elements.fadeOut(1000, funciton() { 
     var $newElement = $('#' + newId); 
     $newElement.fadeIn(); 
    }); 
} 
window.onload = function() {showDiv('1');} 

Answer 2

, 전환이 발생하지 않을 것 .

당신은 요소의 표시를 설정 한 다음 공의의 setTimeout이 전환이 다음 프레임에서 발생하는 원인이됩니다 호출

setTimeout(function() { 
    // start transition 
}, 0); 

해야한다.