[ Príspevkov: 11 ] 
AutorSpráva
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 10.07.07
Prihlásený: 10.08.16
Príspevky: 128
Témy: 40 | 40
NapísalOffline : 20.02.2014 10:03 | :visible potom animacia

ahojte, chcel by som urobit animaciu, ak niekto napriklad zoscrolluje na jedno divku, aby nasledne sa v tom divku ine div pohlo. Div Box mam viacero.

html
Kód:
<div id="box"><div id="boxja"></div></div>


jquery
Kód:
if($('#box').is(':visible')) {$(this).children('#boxja').animate({'left': '10%'}, 400);}


pozeram na to a zda sa byt vsetko ok. - no nefunguje a neviem kde robim chybu.

dakujem za radu


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.02.14
Prihlásený: 19.01.18
Príspevky: 443
Témy: 9 | 9
NapísalOffline : 20.02.2014 10:20 | :visible potom animacia

to nepojde cez visible. lebo visible je ten div stale. ja na to pouzivam jquery plugin inview. ten ti vie urcit ci je dany element v 'obraze'


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 10.07.07
Prihlásený: 10.08.16
Príspevky: 128
Témy: 40 | 40
Napísal autor témyOffline : 20.02.2014 11:09 | :visible potom animacia

Dakjem, no chcem sa opytat ci nei je nieco v Jquery ci zisti ci objekt je na obrazovke a ci je ho vidiet. Ak ano, urobi to a to, a ak nie, tak to a to.

dakujem


Offline

Skúsený užívateľ
Skúsený užívateľ
:visible potom animacia

Registrovaný: 29.10.07
Prihlásený: 12.06.17
Príspevky: 1389
Témy: 28 | 28
Bydlisko: Bratislava
NapísalOffline : 20.02.2014 11:43 | :visible potom animacia

Toto by malo zistit ci je na obrazovke.
Kód:
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}


_________________
PC: OS: Windows 10 (64bit) CPU: INTEL Core i5-4440 GPU: ASUS ATI R9280X RAM: Kingston 8GB DDR3 1600MHz MB: MSI B85-G43 Gaming HDD: Seagate 1TB HDD Barracuda SSD: SAMSUNG 120GB HDD 840 EVO CASE: COOLERMASTER N400
Mobil: OS: Android 4.4.2 Model: LG G2 D802 16GB
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 10.07.07
Prihlásený: 10.08.16
Príspevky: 128
Témy: 40 | 40
Napísal autor témyOffline : 20.02.2014 14:10 | :visible potom animacia

tak toto je super. No samozrejme mam teraz iny problem

Kód:
$(window).scroll(function(){
if( $("#bo").is_on_screen() ) {
$(this).children("#box").find("#boxja").animate({'left': '10%'}, 400);
$('#boxta').animate({'right': '10%'}, 400);
}
else
{$('#boxja').animate({'left': '-230px'}, 100);
$('#boxta').animate({'right': '-230px'}, 100);
 }
});


No tak teraz to posiela div bo na kontrolu ci je to vidiet. Co je ok, ked dam najst div boxja - ako this - tak to nefunguje, akonahle vimenim this za #bo, ide to. No samoyrejme oba v jednom #bo (prvom) no na mam 6 pod sebou. Neviem preco to ide iba na prvom.


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.02.14
Prihlásený: 19.01.18
Príspevky: 443
Témy: 9 | 9
NapísalOffline : 20.02.2014 14:29 | :visible potom animacia

preco by to malo fungovat s this? v tvojom pripade je 'this element' window a nie #boxja.
ale kazdopadne skus este raz napisat co chces a v ktorom riadku to myslis, lebo z toho co si napisal nerozumiem nic :D


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 10.07.07
Prihlásený: 10.08.16
Príspevky: 128
Témy: 40 | 40
Napísal autor témyOffline : 20.02.2014 15:14 | :visible potom animacia

OK takze am script:
Kód:
<script type="text/javascript">
$(document).ready(function(){

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}



$(window).scroll(function () {
$('#bo').each(function (i) {
 if (isScrolledIntoView(this)) {
$(this).find("#boxja").animate({'left': '12%'}, 400);
$(this).find('#boxta').animate({'right': '12%'}, 400);
        }
      else {
$(this).find("#boxja").animate({'left': '-230px'}, 100);
$(this).find('#boxta').animate({'right': '-230px'}, 100);}
    });
});



})
</script>


no a postupnost div je taka:

Kód:
<div id="#bo">
<div id="#box"><div id="#boxja"></div></div>
<div id="#box"><div id="#boxta"></div></div>
</div>
<div id="#bo">
<div id="#box"><div id="#boxja"></div></div>
<div id="#box"><div id="#boxta"></div></div>
</div>

dany prikald mi pekne pohne oboma divkami do stredu, ale iba v jednom #bo. Druhe sa ani nepohne.

Dufam, ze terza je to lepsie vysvetlenie. :O


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.02.14
Prihlásený: 19.01.18
Príspevky: 443
Témy: 9 | 9
NapísalOffline : 20.02.2014 15:23 | :visible potom animacia

nemozes mat viac elementov s rovnakym id, zmen to na class. a id v html sa nepise s "#" ;)


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 10.07.07
Prihlásený: 10.08.16
Príspevky: 128
Témy: 40 | 40
Napísal autor témyOffline : 20.02.2014 15:27 | :visible potom animacia

joj sorry jasne to tam nemam .. skusim to zmenit na class

update:
---------------------

no class pohne kazdou, ale nie prave tou class, ktora je vidiet.


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 10.07.07
Prihlásený: 10.08.16
Príspevky: 128
Témy: 40 | 40
Napísal autor témyOffline : 20.02.2014 15:42 | :visible potom animacia

no ak zmenim vsetky div na class - tak pohne, ale vsetkym naraz a nie len konkretnym divom ktory je tam.

vyriesene - vlastne to class bolo to co bola chyba :

Kód:
$(window).scroll(function () {
$('.box').each(function (i) {
 if (isScrolledIntoView(this)) {
$(this).find(".boxja").animate({'left': '12%'}, 400);
$(this).find('.boxta').animate({'right': '12%'}, 400);
        }
      else {
$(this).find(".boxja").animate({'left': '-230px'}, 100);
$(this).find('.boxta').animate({'right': '-230px'}, 100);}
    });
});

Dakujem Vam


Naposledy upravil Lier dňa 20.02.2014 15:46, celkovo upravené 2

Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.02.14
Prihlásený: 19.01.18
Príspevky: 443
Témy: 9 | 9
NapísalOffline : 20.02.2014 15:45 | :visible potom animacia

$('#bo').each(function (i) {
if (isScrolledIntoView(this)) {

to mas blbost. v each nepouzivas this, treba upravit argumenty funkcie na:

$('#bo').each(function (index, element) {

a miesto this pouzivat 'element'. preto ti nepohne tym spravnym, lebo kedze this je iny objekt, tak to nevyhovuje podmienky a vykona sa ta druha.


 [ Príspevkov: 11 ] 


:visible potom animacia



Podobné témy

 Témy  Odpovede  Zobrazenia  Posledný príspevok 
V tomto fóre nie sú ďalšie neprečítané témy.

ICQ Visible - unVisible

v Sieťové a internetové programy

10

696

21.08.2006 9:00

xyz

V tomto fóre nie sú ďalšie neprečítané témy.

ANIMACIA

v Ostatné programy

3

283

21.06.2012 20:21

shiro

V tomto fóre nie sú ďalšie neprečítané témy.

Animacia

v Grafické programy

0

829

27.07.2007 15:23

erok662

V tomto fóre nie sú ďalšie neprečítané témy.

Animácia

v Grafické programy

0

180

02.03.2015 2:35

SpL1tt3r

V tomto fóre nie sú ďalšie neprečítané témy.

Animácia

v Grafické programy

5

243

07.10.2012 14:48

shiro

V tomto fóre nie sú ďalšie neprečítané témy.

FLASH animacia

v Ostatné

0

320

04.05.2009 16:35

beks

V tomto fóre nie sú ďalšie neprečítané témy.

Animácia snehu

v Grafické programy

3

454

03.12.2010 19:29

ac.milan

V tomto fóre nie sú ďalšie neprečítané témy.

Animácia Loga

v Grafické programy

3

230

01.10.2013 9:11

shiro

V tomto fóre nie sú ďalšie neprečítané témy.

Animacia odkazu

v JavaScript, VBScript, Ajax

2

215

11.04.2015 20:27

weroro

V tomto fóre nie sú ďalšie neprečítané témy.

Animácia - L4D2

v Grafické programy

4

151

30.05.2013 17:34

shiro

V tomto fóre nie sú ďalšie neprečítané témy.

Gimp - animacia

v Grafické programy

0

383

30.11.2011 18:35

fubu

V tomto fóre nie sú ďalšie neprečítané témy.

3D animacia

v Grafické programy

3

801

17.02.2009 12:03

freedie

V tomto fóre nie sú ďalšie neprečítané témy.

webdeign animacia

v Webdesign

1

239

12.03.2015 21:37

chrono

V tomto fóre nie sú ďalšie neprečítané témy.

CSS animacia

v HTML, XHTML, XML, CSS

2

402

29.07.2010 19:13

Incuperable

V tomto fóre nie sú ďalšie neprečítané témy.

FLASH animacia

v Ponuka práce

0

719

22.05.2009 18:57

beks

V tomto fóre nie sú ďalšie neprečítané témy.

Animacia otočenia obrazku

v Grafické programy

2

296

24.05.2012 21:15

fubu



© 2005 - 2018 PCforum, edited by JanoF