Diskuze: Animacie pomocou JS

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

oopssk21

Člen

oopssk21:21.1.2016 21:06

Zdravim.Prosim vas mohol by niekto pomoct upravit JS kod ktory by mal robit animaciu fotiek (fadeOut a fadeIn). Problem je v tom ze prvy prikaz (fadeOut) sa spravi iba pre prvu fotku a zastavi sa na druhej a skonci a neporacuje dalej.Dakujem za kazdu radu.
CSS kod:

@-webkit-keyframes hvr-wobble-to-top-right {
16.65% {
-webkit-transform: translate(8px, -8px);
transform: translate(8px, -8px);
}

33.3% {
-webkit-transform: translate(-6px, 6px);
transform: translate(-6px, 6px);
}

49.95% {
-webkit-transform: translate(4px, -4px);
transform: translate(4px, -4px);
}

66.6% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}

83.25% {
-webkit-transform: translate(1px, -1px);
transform: translate(1px, -1px);
}

100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}

@keyframes hvr-wobble-to-top-right {
16.65% {
-webkit-transform: translate(8px, -8px);
transform: translate(8px, -8px);
}

33.3% {
-webkit-transform: translate(-6px, 6px);
transform: translate(-6px, 6px);
}

49.95% {
-webkit-transform: translate(4px, -4px);
transform: translate(4px, -4px);
}

66.6% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}

83.25% {
-webkit-transform: translate(1px, -1px);
transform: translate(1px, -1px);
}

100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}

.pice{
position: absolute;
height: 60px;
width: 200px;
display: block;
border: 1px solid red;

}

.hvr-sweep-to-right {
color: white;
font-weight: normal;
text-transform: uppercase;
text-decoration: none;
font-size: 2.344em;
vertical-align: center;
position: absolute;
background: rgb(225,132,37);
display: inline-block;
padding: 10px 10px 10px 10px;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
z-index: 2;
opacity: .854122; /* prehliadnost*/
top: 300px; /* odsadenie z hora */
left:470px ;
}

.hvr-sweep-to-right:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
color: rgb(225,132,37);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
color: rgb(225,132,37);
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

.hvr-sweep-to-right:active{
border: solid 4px rgb(225,132,37);

}

.fotky {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;

}
.fotky img {
position: absolute;
top: 0;
left: 0;
right: 0px;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
z-index: 1;

}

p{
display: block;
position: absolute;
font-size: 2em;
margin: 0 0 0 0;
top: 580px;
left: 80px;
z-index: 8;
color: white;
}

#Supp{
display: block;
position: absolute;
font-size: 2em;
margin:0 0 0 0;
top: 580px;
left: 130px;
color: white;

}

div.souhrn {
display:none
}

sup{
position: relative;
top: 8px;
font-size: 0.83em;
}

.sipka{
margin-right: 5px;
}

blockquote{
display: block;
position: absolute;
z-index: 10;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 30px;
color: white;
top: 350px;
margin: 10 auto;
left: 405px;
background-color:rgb(225,132,37);
opacity: 0.8;
padding-left: 5px;
padding-right: 5px;
}

JS kod:

var fotky=$('.fotky');
setInterval(function(){

fotky.children(':last').fadeOut(1500, function(){

this.fotky.children(':last').prependTo(fotky);

});

},1500);

Odpovědět

21.1.2016 21:06

David Hynek

Tvůrce

David Hynek:21.1.2016 23:04

asi neporadím, ale nemělo by to projít všechny dotčené prvky a přidat jim tu funkci?
Proto to funguje jen u první, protože je to jen na první spuštěné.

Nahoru Odpovědět

21.1.2016 23:04

Čím víc vím, tím víc věcí nevím.

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.

Nejčastěji vyhledáváné

Diskuze: Animacie pomocou JS