Zmiana położenia elementu po kliknięciu

Odpowiedz Nowy wątek
2011-08-31 20:31
0

Witam!
Mam taki bardzo prosty kod w javascript z użyciem jquery:

 <!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>Testowy</title>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(e) {
            $("#pierwszy").click(function(e) {
                $(this).hide("slow").show("slow");
            });
        });
 
    </script>
</head>
 
<body>
    <div id="pierwszy" style="background: blue; border: 4px solid #0FF; width: 200px; height:200px; margin: 0 auto;"></div>
</body>
</html>

Zastanawia mnie dlaczego po kliknięciu element 'traci' swoje wyśrodkowanie, tj. z położenia na środku ekranu przesuwa się do lewej krawędzi?

piternet

Pozostało 580 znaków

2011-09-02 21:26
0

Może pokażę na zdjęciach o co chodzi. Przed kliknięciem w obrazek:
http://i.imgur.com/pxAvi.png</img&gt;
W trakcie animacji:
http://i.imgur.com/oVtsX.png</img&gt;

O co chodzi?

Pozostało 580 znaków

2011-09-02 21:39
Rev
0

Wygląda, że te efekty muszą zmienić margin elementu. Ubierz go w jakiś nadrzędny, wyśrodkowany element i powinno być ok.


Pozostało 580 znaków

2011-09-02 21:50
0

Zrobiłem tak:

 <!DOCTYPE html>
<head>
        <meta charset="utf-8" />
        <title>Testowy</title>
        <style type="text/css">
            #nadrzedny {
                 width: 100%;
                 text-align: center;
                 margin: 0 auto;
            }
 
            #pierwszy {
                margin: 0 auto;
                background: blue;
                border: 4px solid #0FF;
                width: 200px;
                height:200px;
            }
        </style>
        <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
        <script type="text/javascript">
                $(document).ready(function(e) {
                        $("#pierwszy").click(function(e) {
                                $(this).hide("slow").show("slow");
                        });
                });
 
        </script>
</head>
 
<body>
       <div id="nadrzedny"> <div id="pierwszy"></div></div>
</body>
</html> 

Efekty takie same co wcześniej.

Pozostało 580 znaków

2011-09-02 22:31
gsdgdsg

no bo nic nie zrobiłeś, tylko dodałeś niepotrzebnego diva
chodzi o to że animacja której chcesz użyć zmniejsza width, height, padding, margin oraz opacity
jeśli margin jest auto to nie da się go zmniejszać więc jest zmieniany na 0

to co miałeś zrobić to opakować w wyśrodkowanego diva, ale ten div miał mieć konkretną szerokość, a ten w środku nie może już mieć margin ustawionego na "auto"
jeśli Ci się to nie podoba to zdefiniuj własną animację, lub użyj text-align i 'inline-block' do wyśrodkowania (kombinowane)

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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