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: 11 let
|
0