CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Barney Stinson
Barney Stinson

Reputation: 1002

Jquery Delay and more

i [have/want] to make a Storytelling Website like:

http://www.bizbrain.org/coffee/

1) Would you guys creat every Object in CSS or would you do it Frame by Frame in Photoshop?

2) Why doesnt the Delay work? (Yes i tested a Higher delay aswell like 5000)(Code Below the Line)

3) How do i bind the stylesheet.css File if i move it to the \misc\style Folder? I tried:

<link rel="stylesheet" href="\misc\style\stylesheet.css">
<link rel="stylesheet" href=".\misc\style\stylesheet.css">
<link rel="stylesheet" href=".misc\style\stylesheet.css">

<link rel="stylesheet" href="/misc/style/stylesheet.css">
<link rel="stylesheet" href="./misc/style/stylesheet.css">
<link rel="stylesheet" href=".misc/style/stylesheet.css">

_________________________________________________________________________________  ^the Line 

test.js

$(document).ready(function(){ 
	var n = 1;	
	for(i = 1; i < 30; i++){
		changePicture();
	}
	function changePicture(){
		n+=1;
		$('.p').delay(33).css('background-image', 'url("misc/bilder/'+n+'.png")');		
	}	
});

stylesheet.css

* {
	margin: 0;
	padding: 0;
	border: 0;
	height: 1000%;
}
.p{
	height: 100%;
    width: 100%;
	position:relative;
	padding: 25%;
	background-size:cover;
	background-attachment:fixed;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
	background-image: url("misc/bilder/1.png");    
}

index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="\misc\style\stylesheet.css">
<title>Evolution des Menschen</title>
</head>
<body>
	<div class="p"></div>	
<script type="text/javascript" src="misc/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="misc/js/test.js"></script>
</body>
</html>

As you can tell from the Code i have no Webdesign experience Thanks in advance

Upvotes: 1

Views: 96

Answers (2)

imjosh
imjosh

Reputation: 4872

$(document).ready(function(){ 
  var delay = 33;
  changePicture(1, 30, 'misc/bilder', '.png')

  function changePicture(next, last, path, extension){
    if (next <= last){
      setTimeout(function(){
        $('.p').css('background-image', 'url("' + path + '/' + next + extension + '")');
        next += 1;
        changePicture(next, last, path, extension)
      }, delay);
    }   
  }
});

Upvotes: 1

Jorge Fuentes Gonz&#225;lez
Jorge Fuentes Gonz&#225;lez

Reputation: 11809

1) CSS for sure. Frame by frame is not HTML5. Is just a video... With CSS you have control of every object, and you can move them in multiple ways with conditionals depending on device width, other element positions, mouse positions and whatever.

2) Because css() in jQuery is not animated dependant. It just gets applied instantly to the object that is called. To css() work with delay() check this answer: Using jQuery delay() with css()

3) You have to remove the starting dot. Check the address of your your test.js file under your index.html. Do the same with your stylesheet.css.

Upvotes: 1

Related Questions