Autor Zpráva
Ruplahlava
Profil
Ahoj, chci si na webu udělat (na spodku stránky) takovou blbinu, bude tam čouhat kousek hlavy a když na to někdo najede myší, tak vykoukne celá postavička.
Požít jquery slideIn téměř nejde, vypadá to škaredě když je to na obrázku, takže animate bottom. To by šlo postavička se mi hýbe, ale když se ji pokusím schovat pomocí pevné výšky divu, a následne overflow: hidden, tak to akorát do toho divu zajede... Nenapadá někoho jak to vyřešit?
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<style type="text/css" media="screen">
    .redneckClass, .push{
    height: 450px;
}
#redneck{
    position: relative;
}
.redneckClass{
    position: relative;
    z-index: 3;
    margin-left: 40%;
    margin-top: 150px;
}
</style>
</head>
<body>
<div class="redneckClass"><img src="http://ruplahlava.eu/wp-content/themes/kozyvozy/img/redneck-sign.png" alt="redneck" id="redneck"></div>
</body>
<script type="text/javascript">
            $('.redneckClass').hover(
            function(){
                $('#redneck').animate({bottom:370}, 1000);
            },
            function () {
                $('#redneck').animate({bottom:0}, 1000);
              });
</script>
</html>
Kcko
Profil
Ruplahlava:
Tohle Ti pomůže http://www.learningjquery.com/2009/02/slide-elements-in-different-directions


PS. Jen v rychlosti (ale udělej dle předchozího linku)

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 
<style type="text/css" media="screen">
body
{
    margin: 0; 
    padding: 0;
    overflow: hidden;
}

#redneck{
    position: absolute;
    bottom: -300px;
    height: 450px;
}
</style>
</head>
<body>
<img src="http://ruplahlava.eu/wp-content/themes/kozyvozy/img/redneck-sign.png" alt="redneck" id="redneck">
</body>
<script type="text/javascript">
            $('#redneck').hover(
            function(){
                $(this).animate({bottom:-150}, 1000);
            },
            function () {
                $(this).animate({bottom: -300}, 1000);
              });
</script>
</html>
Ruplahlava
Profil
noo tohle už jsem viděl, udělat to s divama je jednoduchý a pomocí slide, ale s obrázkama to nevypadá dobře. Nakonec jsem se trošku probugoval přes css a animuju velikost vnějšího divu a jeho pozici zároveň a celkem to funguje :D

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: