Terve.
Olen yrittänyt saada aikaan smoothia tekstin piilotus/näytä efektiä.
Eli käytännössä homman pitäisi näyttää samanlaiselta kuin osoitteesta http://meteli.net/festarit löytyvä. (se tulevat festarit -kohta)
Ohjelmointiputkan esimerkkeihin vahvasti pohjautuva oma yritykseni näyttää siis seuraavalta. Ainut vika, että se ei ole smoothi, vaan div/span vaan töksähtää paikalle.
<script language='JavaScript'>
function swap_content(span) {
displayType=(document.getElementById(span).style.display=='none') ? 'block':'none';
document.getElementById(span).style.display=displayType;
setTimeout("swap_content()",400);
}
</script>
<a href="#" onmouseover="swap_content('1'); return false;" onmouseout="swap_content('1'); return false;">Klik</a><br>
<span id="1" style="display: none" onmouseover="swap_content('1'); return false;" onmouseout="swap_content('1'); return false;">jees
poks</span>
<a href="#" onclick="swap_content('2'); return false;">Klik2</a>
<span id="2" style="display: none"><b>jees</b><u>poks</u></span>Eli ton varmaan sais jotenkin setTimerilla hidastettua? Vai?
me sinne meteli.net ja katso lähdekoodista.
No olen tiiraillut sitä lähdekoodia ja yrittänyt ottaa mallia, mutta tuloksetta. Vika tietenkin tekijässä. Enhän mä apua kysyisi, jos sille ei olisi tarvetta. Eli jos osaisin plagioida suoraan tuolta meteli.netistä, olisin sen jo tehnyt.
Eniveis, yritin soveltaa tota meteli.netin koodia, mutta empä saanut skulaamaan. :/
HTML
<html>
<head>
<style type="text/css">
div {
border: thin solid black;
width: 200px;
height: 100px;
overflow: hidden;
padding: 0; /* Tarkea clientHeightin takia */
}
p {
margin: 1em;
}
</style>
<script src="javascript.js"></script>
</head>
<body>
<div id="div1">
<p>
dasdasd asdl ahsuflsdgfdh h dgfdh gfdh
gfdh trdihtopjoptrjd hnjgfdkh gfdh
t dhikgfdhmagkfdhoptdjgfd h
</p>
</div>
<input type="button" onclick="smoothExpand(getElementById('div1'), 100, 200)" value="Suurenna">
</input>
<input type="button" onclick="smoothCollapse(getElementById('div1'), 100, 200)" value="Pienennä">
</input>
</body>
</html>javascript.js
var updaterate = 300;
function resizeHeight(obj, x) {
obj.style.height = x;
}
/*
* obj - Kohde
* p - venytys pikseleina
* time - venytykseen kuluva aika (millisekunteina)
*/
function smoothExpand(obj, p, time) {
var obj_s = obj.style;
var h = obj.clientHeight;
if(!obj_s.height)
obj_s.height = h;
var jaksoja = updaterate*time/1000;
var dt = time / jaksoja;
for(i = 0; i < jaksoja; i++) {
s = (p*dt*i*dt*i)/(time*time)
setTimeout(resizeHeight, dt*i, obj, h+s);
}
}
function smoothCollapse(obj, p, time) {
var obj_s = obj.style;
var h = obj.clientHeight;
if(!obj_s.height)
obj_s.height = h;
var jaksoja = updaterate*time/1000;
var dt = time / jaksoja;
for(i = 0; i < jaksoja; i++) {
s = (p*dt*(i)*dt*(i))/(time*time)
setTimeout(resizeHeight, dt*i, obj, h-s);
}
}Kiitos Baglair.
Toi skulaa muuten, mutta tulee pientä bugia, jos vaikkapa laitan html:n että
<div id="div2" onmouseover="smoothExpand(getElementById('div2'), 100, 200)" onmouseout="smoothCollapse(getElementById('div2'), 100, 200)">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam vel tellus. Morbi condimentum fringilla lorem. Cras vel enim. Nulla aliquet sem vel est. Cras lectus magna, mattis quis, euismod eget, condimentum quis, purus. Sed sagittis tellus non libero. In nisl augue, faucibus a, vestibulum nec, congue vitae, pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque feugiat est at ligula. Fusce vulputate scelerisque quam.
</p>
</div>Ei nähtävästi tahdo tehdä yhteistytä onmouseoverin kanssa. Olisiko ehdotuksia?
Aihe on jo aika vanha, joten et voi enää vastata siihen.