| Autor | Zpráva | ||
|---|---|---|---|
| Wladimir Čert Profil * |
#1 · Zasláno: 22. 4. 2013, 13:40:05
Zdravím,
měl bych dotaz, chtěl bych udělat plynulé zobrazení vnořeného divu po najetí na "vyšší" div, viz.: HTML: <div id="test"><div id="subtest">Lorem ipsum</div></div> CSS: #test {width: 100px; height: 100px;}
#test #subtest {visibility: hidden; width: 50px; height: 50px;}
#test:hover #subtest {visibility: visible}
V Jquery si umím udělat klasický div, ale jak udělat aby se zobrazil plynule vnořený? <script type="text/javascript">
$(function() {
$('#test').css('opacity', 0.5);
$('#test')
.hover(function() {
$(this).stop().animate({ opacity: 1.0 }, 100);
},
function() {
$(this).stop().animate({ opacity: 0.5}, 100);
});
});
</script> |
||
| ShiraNai7 Profil |
Přímo pro #test a #subtest takto:
void function () {
function animate(elem, opacity)
{
if (elem.is(':animated')) {
elem.stop(true, true);
}
subtest.animate({opacity: opacity}, 300);
}
var subtest = $('#subtest');
$('#test').hover(
function () { animate(subtest, 1); },
function () { animate(subtest, 0); }
);
}(); |
||
| Wladimir Čert Profil * |
#3 · Zasláno: 22. 4. 2013, 15:48:09
Bohužel, nejde.
|
||
| Camo Profil |
#4 · Zasláno: 22. 4. 2013, 18:48:04
Zobraziť ho nieje problém. Problém je ak ho chceš plynule skryť. Vtedy to zrejme prebije css hover
$(function() {
$('#test').css('opacity', 0.5);
$('#subtest').css('opacity', 0);
$('#test').hover(function() {
$(this).stop().animate({ opacity: 1.0 }, 2000); $('#subtest').animate({opacity:1}, 2000);
},
function() {
$(this).stop().animate({ opacity: 0.5}, 2000); $('#subtest').animate({opacity:0}, 2000);
});
}); |
||
| Wladimir Čert Profil * |
#5 · Zasláno: 24. 4. 2013, 10:08:50
Díky! :-)
|
||
|
Časová prodleva: 13 let
|
|||
0