Avatar
oopssk21
Člen
Avatar
oopssk21:

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. ledna 21:06
Avatar
David Hynek
Redaktor
Avatar
Odpovídá na oopssk21
David Hynek:

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. ledna 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.