[ Príspevkov: 2 ] 
AutorSpráva
Offline

Užívateľ
Užívateľ
jednoduchy onclick animation

Registrovaný: 07.08.06
Prihlásený: 18.11.21
Príspevky: 947
Témy: 268 | 268
Bydlisko: Levice
NapísalOffline : 20.09.2017 22:24 | jednoduchy onclick animation

Na obrazovke budem mat nahodne umiestneny maly obrazok (nahodna pozicia, cize nie vzdy na tom istom mieste).

Chcem, aby sa po kliknuti na ten obrazok tento obrazok presunul vzdy na jednu poziciu, v mojom pripade top: 65px, left:400px.

Skusal som toto:

Kód:
var relX = ev.pageX - $('#div1').offset().left;
var relY = ev.pageY - $('#div1').offset().top;

$('#div1').append('<div style="top:'+relY+'px; left:'+relX+'px; position:absolute; display:none;" class="nieco">obrazok</div>');
//$('#div'+cid).remove();
$('.nieco').show();
$('.nieco').animate({ "top": "-="+(ev.pageY-65)+'px', "left": "400px", opacity: 100 }, 1500, function()
{

});


Funguje mi to, ze to presunie hore na top:65, kedze tam pocitam polohu obrazka minus 65px, cize kdekolvek bude obrazok, tak sa presunie hore na tu poziciu.

Problem je s horizontalnym posunom, kedze neviem ci bude obrazok vlavo ci vpravo, neviem mu zadat ci ma ist vlavo ci vpravo, a nechcem zbytocne davat nejake podmienky, ze kde je obrazok tak podla toho urci smer atd.

neexistuje taka metoda, ze by som len zadal suradnice (absolute position na celej obrazovke) a ze by sa po kliku ten obrazok presunul presne na to miesto? Cize nie relativne od obrazka, ale presne definovane suradnice.

Druha vec je, ze hned po kliku aby zmizol ten obrazok z povodneho miesta, a po ukonceni animacie sa objavi na tej finalnej pozicii. To sa aj objavi, len nezmizne z povodneho miesta, cize zostane aj tam, hoci animacia prebehne.

Ked dam
Kód:
$('#div1').remove();
tak zmizne aj animacia, kedze tam je append k tomu divu.

Viete poradit?

// Spojený príspevok Štv 21.09.17 8:39

o,, tak som predsa len pouzil podmienky

Kód:
 var aa = $('#div1').offset().top;
        var bb = $('#div1').offset().left;

        var pos = 300;

        if (bb <= pos) {
            var move = (pos - bb);
            var left = "+" + move + "px";
        } else {
            var move = (bb - pos);
            var left = "-=" + move + "px";
        }


a potom v animate funkcii len pouzijem premennu left a funguje to, presunie sa to na presne urcene miesto, nech je ten obrazok kdekolvek.

Problem este mam s tym, ze by sa hned ten div po kliku skryl na povodnom mieste a bol by viditelny len pri animacii

// Spojený príspevok Štv 21.09.17 9:05

takze nakoniec som zrusil append, a animujem len hlavny div po kliknuti. Tym padom nepotrebujem pocitat poziciu ani podmienky, len definujem do animate funkcie napevno "top": '20px', "left": '300px', a po kliku to animuje presne na to miesto a navyse obrazok nezostane na povodnom mieste ale sa presuva.

Niekedy na to clovek pride skor sam :)


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 : 22.09.2017 11:24 | jednoduchy onclick animation

vidim, ze si to vyriesil, len by som ti poradil: oddel javascript a style. nemiesaj to dokopy, css nema byt preco v javascripte (ak to naozaj nie je potrebne)
vsetko css presun do suboru css a v javascripte to ovladaj cez zmenu triedy. bude to ovela prehladnejsie


 [ Príspevkov: 2 ] 


jednoduchy onclick animation



Podobné témy

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

Free 2D animation software

v Ostatné programy

1

988

21.09.2009 21:43

Tech

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

onclick

v JavaScript, VBScript, Ajax

3

592

07.10.2010 0:40

camo

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

onclick + jquery

v JavaScript, VBScript, Ajax

0

483

12.03.2010 13:31

neopagan

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

Opera onclick

v JavaScript, VBScript, Ajax

8

498

05.05.2010 17:57

camo

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

onclick window open

v JavaScript, VBScript, Ajax

1

492

19.08.2010 18:52

chrono

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

onclick v innerHTML

v JavaScript, VBScript, Ajax

4

900

15.06.2009 8:30

zaciatocnik

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

onclick unlink php

v PHP, ASP

7

1185

13.01.2010 22:58

pilná lama glama

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

dynamické menenie udalosti onclick

v JavaScript, VBScript, Ajax

5

918

13.06.2008 22:47

emer

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

href na div a onclick

v HTML, XHTML, XML, CSS

4

614

13.09.2011 21:31

vputin

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

innerHTML onclick function ... prosím pomoc

v JavaScript, VBScript, Ajax

3

712

07.08.2009 19:42

Ďuri

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

onclick posun textu a fade out

v JavaScript, VBScript, Ajax

5

722

20.02.2015 7:56

neopagan

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

Dva onclick v jednom a href?

v HTML, XHTML, XML, CSS

1

553

03.01.2010 17:32

Ďuri

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

Jednoduchy script

v JavaScript, VBScript, Ajax

10

916

18.12.2008 15:32

Draex

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

Jednoduchý zoznam

v HTML, XHTML, XML, CSS

12

871

19.06.2010 13:20

shaggy

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

jednoduchy login

v Ostatné

7

653

05.09.2013 14:03

vama

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

Jednoduchý CMS

v Redakčné systémy

1

1944

01.03.2008 18:57

Toxic



© 2005 - 2024 PCforum, edited by JanoF