ajouter des transitions à un cacher/montrer javascript dom

Question

J'ai cette fonction (et 3 plus comme ça)

function property(){ 
document.getElementById("property").style.display = "block"; 
document.getElementById("hotel").style.display = "none"; 
document.getElementById("other").style.display = "none"; 
document.getElementById("main").style.display = "none"; 
} 

Comment puis-je ajouter une transition vers le changement de divs. La fonction est appelée sur les liens.

Maintenant, il affiche simplement la div sur laquelle on clique et cache les autres. Mais je voudrais que le vieux div à disparaître et le nouveau à disparaître dans ..

Merci

Answer 1

une façon populaire est d'utiliser jQuery:

$('#property').fadeIn(); 

et voilà. La page http://api.jquery.com/fadeIn/ a une démo.

Answer 2

Utilisation (Demo)

fadeIn(element, 200); // ms 
fadeIn("#element_id", 300); 
fadeOut(element, 600, function() { 
    alert("fade finished"); 
}); 

code

function fade(dom, current, target, duration, after) { 
    duration = duration || 600; 
    if (typeof dom === "string") 
    dom = document.getElementById(dom); 
    var start = +new Date(); 
    var finish = start + duration; 
    var easing = function (pos) { 
    return (-Math.cos(pos * Math.PI)/2) + 0.5; 
    }; 
    var interval = setInterval(function() { 
    var now = +new Date(); 
    var pos = now > finish ? 1 : (now - start)/duration; 
    setOpacity(dom, interpolate(current, target, easing(pos))); 
    if (now > finish) { 
     clearInterval(interval); 
     after && after(); 
    } 
    }, 13); 
} 

function fadeIn(dom, duration, after) { 
    fade(dom, 0, 1, duration, after); 
} 
function fadeOut(dom, duration, after) { 
    fade(dom, 1, 0, duration, after); 
} 

function setOpacity(obj, value) { 
    if (obj) { 
    obj.style.opacity = value; 
    obj.style.filter = 'alpha(opacity=' + value * 100 + ')'; 
    obj.style.zoom = 1; 
    } 
} 
function interpolate(source, target, pos) { 
    return (source + (target - source) * pos).toFixed(3); 
}​