javascript - Why is my images no fadding out? -
i got started jquery , javascript today, it's possible i'm doing basic wrong. have in mark-up, javascript defines section height viewer port height. inside have 4 each 1 containing 1 image, want them fade out 1 after other. here came with, it's doing nothing , have no clue why, tried debugging it, couldn’t find why well. can point out doing wrong? i'd accomplish simple full screen slide-show, because everywhere there ready use templates , i'd know how code scratch.
here html
<!doctype html> <html> <head lang="pt-br"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--css--> <link type="text/css" rel="stylesheet" href="css/reset.css"> <link type="text/css" rel="stylesheet" href="css/main.css"> <!--end css--> <!--script--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/jquery/my_jquery_funcs.js"></script> <!--end script--> <title>patrick oliveira</title> </head> <body> <!--hero comeca aqui--> <section id="hero-slider"> <div id="slide-1"></div> <div id="slide-2"></div> <div id="slide-3"></div> <div id="slide-4"></div> </section> <script> realtimeheight();/*atualiza em tempo real altura slide show*/ </script> <!--hero termina aqui--> </body> </html>
the css
#hero-slider{ width: 100%; } #slide-1, #slide-2, #slide-3, #slide-4{ width: 100%; height: inherit; position: absolute; } #slide-1{ background: url("../imgs/imagem1.jpeg") no-repeat center; background-size: cover; } #slide-2{ background: url("../imgs/imagem2.jpg") no-repeat center; background-size: cover; } #slide-3{ background: url("../imgs/imagem3.jpg") no-repeat center; background-size: cover; } #slide-4{ background: url("../imgs/imagem4.jpg") no-repeat center; background-size: cover; }
and javascript
var = 4; $(document).ready(function(){ $(window).resize(function(){ realtimeheight(); }); settimeout(function(){ fadeitout("#slide-"+i); }, 2500); }); function fadeitout(objectid){ var fadetime = 2500; /*time fade out*/ $("#"+objectid).fadeout(fadetime); if(i == 1){ = 5; } i--; } function realtimeheight(){ var altura = $(window).height(); $("#hero-slider").css("height",altura); }
p.s: want learn how make 1 scratch, after i'll start using templates time saving.
you close, 1 error.
objectid
has hash. '#' + objectid
returns ##slide-4
$('#' + objectid).fadeout(fadetime);
should be
$(objectid).fadeout(fadetime);
(demo)
Comments
Post a Comment