| Autor | Zpráva | ||
|---|---|---|---|
| mersi Profil |
#1 · Zasláno: 6. 11. 2011, 17:25:36 · Upravil/a: mersi
Mám takýto problém. Potrebujem zarovnať DIV blok horizontálne na stred, tak aby som ním mohol pomocou jquery animate pohybovať.
DIV musí byť samozrejme pozicovaný absolútne a jeho rodičovský DIV zase nemá pevne nastavenú šírku, ale musí byť široký cez celé okno prehliadača. Pretože idem robiť niečo ako slideshow. DIV predstavuje nejaký obsah, ktorý sa má zo stredu presunúť za pravý okraj a zároveň ďalší DIV by mal z poza ľavého okraja presunúť na pozíciu toho pôvodého. Mám to spravené tak že jeden je skrytý za ľavým okrajom: div.pair_of_photos:nth-child(1){
left: -900px;
}
a druhý je v strede: div.pair_of_photos:nth-child(1){
left: 50%;
margin-left: -450px;
Následne po nejakej udalosti presuniem prvý na pozíciu toho druhého, vypočítanú v jquery. A ten druhý potrebujem presunúť za pravý okraj. Problém nastane pri presune toho druhého zo stredu. Nezačne sa posúvať zo stredu, svojej pozície nast. v CSS ale skočí k ľavému okraju okna a začne odtiaľ. Neviete mi niekto poradiť, ako na to? ich rodičovský DIV: div#content {
text-align: left;
height: 100px;
}a posun realizujem klasicky: function move(duration){
div1.animate({left:position2}, {duration: duration });
div2.animate({left:position3}, {duration: duration , complete: complete()});
function complete(){
}
} |
||
| Darker Profil |
#2 · Zasláno: 6. 11. 2011, 23:15:53 · Upravil/a: Darker
No bez ukázky neodhadnu proč ti to dělá co ti to dělá, každopádně vidím pár chybek už v těch šesti řádcích.
function move(duration){
div1.animate({left:position2/*Proč používáš globální proměnnou? Kdo má pak vědět, kde se v ní vzala špatná hodnota?*/}, {duration: duration });
div2.animate({left:position3/*Totéž*/}, {duration: duration , complete: complete()/*Tady posíláš pro klíč complete hodnotu null*/});
function complete(){
}
}Pro complete to děláš špatně, za název funkce nedávez závorky, jinak nepředáváš funkci ale její návratovou hodnotu - tedy null. Edit: Nesouvisí to odskočení s hodnotou left pro vlastnost text-lign u DIV#content? |
||
| mersi Profil |
#3 · Zasláno: 7. 11. 2011, 21:13:35 · Upravil/a: mersi
Problem som nevyriesil.
Animate sposobi ze DIV skoci na okraj a od neho sa zacne pohybovat. To ze som nast. text-align: center v content to nevyriesilo. <body>
<div id="container">
<div id="header"><a href="#" id="move">animate</a></div>
<div id="content">
<div class="pair_of_photos">
<div class="photo"><div class="label"><span class="user_photo"></span><span class="photo_name"></span></div><div class="photo_img"></div></div>
<div class="photo"><div class="label"><span class="user_photo"></span><span class="photo_name"></span></div><div class="photo_img"></div></div>
<div class="wrap"></div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Maven+Pro:400,700,500,900);
* { overflow: hidden; padding: 0; margin: 0; }
.wrap { clear: both; }
body {
background: url(images/background.png) no-repeat;
background-position: center top;
font-family: 'Maven Pro', sans-serif;
}
div#container {
width: 100%;
}
div#header, div#footer {
margin: 0 auto;
width: 1000px;
}
div#header {
height: 120px;
}
div#footer {
height: 100px;
}
div#content {
width: 100%;
}
div.pair_of_photos {
width: 100px;
height: 100px;
position: absolute;
background: #0C6;
left: 50%;
margin-left: -50px;
}$(function()
{
$('#move').click(function(){
$('.pair_of_photos').animate({left: 3000 }, 5000, function() {
}
);
});
});
|
||
| Chamurappi Profil |
#4 · Zasláno: 7. 11. 2011, 21:30:01
Reaguji na mersiho:
„{left: 3000, }“ Syntaktická chyba, smaž tu nadbytečnou čárku, jinak ten skript nepoběží všude. |
||
| Suta Profil |
#5 · Zasláno: 7. 11. 2011, 22:41:47 · Upravil/a: Suta
Chamurappi:
„smaž tu nadbytečnou čárku, jinak ten skript nepoběží všude.“ Ano, snad všude kromě IE. Faktem však zůstává, že to syntaktická chyba je. |
||
| mersi Profil |
#6 · Zasláno: 7. 11. 2011, 22:54:03 · Upravil/a: mersi
už tam nieje, ale neviete ako to spraviť aby sa to pohybovalo zo stredu stránky?
ono nakoniec tam budú dve také isté bloky, ale druhý viem pekne anymovať z poza ľavého okraja do stredu, len ten zo stredu neide tak ako chcem |
||
| mersi Profil |
#7 · Zasláno: 8. 11. 2011, 12:23:10
uz to mam, ak by to niekto hladal, treba pred posunom nastavit objekt na stred tak, ze v jquery sa zisti pozicia a nastavi priamo v CSS v px
$(function()
{
var pair = $('.pair_of_photos');
var position = pair.position().left+'px';
$('.pair_of_photos').css('left', position);
$('#move').click(function(){
$('.pair_of_photos').animate({left: 3000 }, 5000, function() {
}
);
});
}); |
||
|
Časová prodleva: 12 let
|
|||
0