Zmiana położenia elementu po kliknięciu

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

0

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

O co chodzi?

0

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

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.

0

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)

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