Autor Zpráva
Wladimir Čert
Profil *
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 *
Bohužel, nejde.
Camo
Profil
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 *
Díky! :-)

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: