jQuery - fadeIn , fadeOut , fadeTo - zasada dzialania

2011-09-11 13:54
lolek32bitowy
0

witam

mam oto taki kod
powinien pokazywac i ukrywac plynnie warstwe

problem w tym ze nie pokazuje jej wcale
ale gdy juz zamienie fadeIn na fadeTo('normal', 1.0) a fadeOut na fadeTo('normal', 0.0) to dziala bez problemu
z wyjatkiem IE gdzie za pierwszym razem warstwa nie jest pokazywana w sposob plynny

czy fadeIn nie powinno dzialac identycznie jak fadeTo("normal", 1.0) a fadeOut jak fadeTo("normal", 0.0)
jesli nie to jaka jest miedzy nimi roznica bo domyslam sie ze obydwa realizuja animacje za pomoca opacity
no i w koncu dlaczego IE za pierwszym razem nie wyswietla plynnie warstwa

z gory dziekuje za odpowiedzi

<html>

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<style>

div
        {
        background: silver;
        position: absolute;
        top: 200px;
        left: 200px;
        width: 400px;
        height: 200px;
        text-align: center;

        opacity: 0.0;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);

        }

</style>

<script>

$(document).ready(function(){

    $("#a1").click(
        function() 
        {
            $("div").fadeIn();

        }
    );

    $("#a2").click(
        function() 
        {
            $("div").fadeOut();
        }
    );

});

</script>

</head>

<body>

 <a href="#" id="a1">pokaz</a><br>
 <div><a href="#" id="a2">Tekst _ Tekst _ Tekst</a></div>

</body>

</html>
edytowany 1x, ostatnio: madmike, 2016-12-13 18:26

Pozostało 580 znaków

2011-09-11 15:07
0

z tego co pamiętam to nie trzeba było nic kombinować z opacity, wystarczy ustawić display:none; i fade chodzi

EDIT: sprawdziłem i potwierdzam hipoteze:

<html>

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<style>

div
                {
                background: silver;
                position: absolute;
                top: 200px;
                left: 200px;
                width: 400px;
                height: 200px;
                text-align: center;

                display: none;

                }

</style>

<script>

$(document).ready(function(){

        $("#a1").click(
                function() 
                {
                        $("div").fadeIn();

                }
        );

        $("#a2").click(
                function() 
                {
                        $("div").fadeOut();
                }
        );

});

</script>

</head>

<body>

 <a href="#" id="a1">pokaz</a><br>
 <div><a href="#" id="a2">Tekst _ Tekst _ Tekst</a></div>

</body>

</html>

░█░█░█░█░█░█░█░█░█░█░█░
edytowany 2x, ostatnio: krwq, 2011-09-11 15:09

Pozostało 580 znaków

2011-09-11 15:45
lolek32bitowy
0

dzieki - dziala :)

Pozostało 580 znaków

Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0