:visible potom animacia

Lier · Napísal **Lier**: 20.02.2014 10:03

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:

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

hatto13 · Napísal **hatto13**: 20.02.2014 10:20

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'

Lier · Napísal autor témy **Lier**: 20.02.2014 11:09

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

GoodWill · Napísal **GoodWill**: 20.02.2014 11:43

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));
}

Lier · Napísal autor témy **Lier**: 20.02.2014 14:10

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.

hatto13 · Napísal **hatto13**: 20.02.2014 14:29

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

Lier · Napísal autor témy **Lier**: 20.02.2014 15:14

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

hatto13 · Napísal **hatto13**: 20.02.2014 15:23

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

Lier · Napísal autor témy **Lier**: 20.02.2014 15:27

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

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

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

Lier · Napísal autor témy **Lier**: 20.02.2014 15:42

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

hatto13 · Napísal **hatto13**: 20.02.2014 15:45

$('#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.

:visible potom animacia

Podobné témy