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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -