I tried sliding two images from right to left. The slide is working but only displaying the first image. Please what's the cause? This is my code:
<script type="text/javascript">
var n=0;
var nmax=2;
function timer()
{
window.setInterval(function ()
{
n+=1;
if(n>nmax)
{
n=0;
$('#slideImage').css('left','0');
}
$('#slideImage').css('left',(n)*(1366)*(-1)+'px');
},2500);
}
$(document).ready(function(e) {
timer();
});
</script>
css
.wn_p { height: 400px; width: 1366px; float: left; }
.w_n { height: 400px; width: 100%; overflow: hidden; background-color: #09C; }
.w_n2 { height: 400px; width: 2732px; margin-right: auto;
margin-left: auto; position: relative; display: inline-table;
transition: linear 0.75s 0.2s; -moz-transition: linear 0.75s 0.2s;
-webkit-transition: linear 0.75s 0.2s; }
and here is html
<div class="w_n">
<div class="w_n2" id="slideImage">
<div class="hd_p">
<img name="shift" src="image/bn2.jpg" class="wn_p" />
<div class="des_p">The company maintains high quality standard in all its operations. With high production capacity, the policy thrust is to continue to provide cost-effective, affordable, local alternatives of life saving drugs to the teaming population.
</div>
</div>
<img name="shift" src="image/bn3.jpg" class="wn_p" />
</div>
</div>
If you use jQuery anyway, why not use its animate function?
$(document).ready(function(e) {
$('.wn_p').animate({left: '-200px'}, {duration: 2500});
});
You can set a lot of options, so if you show some html and elaborate on your needs, we could better match the result you're expecting.
The fact only one image is shown could be a CSS thing. You're using an ID, but should use a class if there's more than one image.
Edit: I changed the selector to the class you added. You propably figured that out by now, but it should work this way.
For lots of cycle image effects it might be worthwhile checking out this jQuery Cycle Plugin: http://jquery.malsup.com/cycle2/
THis is a basic pager that might be of interest to start you off: http://jquery.malsup.com/cycle2/demo/pager.php
Here are lots of demos that might help: http://jquery.malsup.com/cycle2/demo/
use:
<html>
<head>
<title>Project</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var n=0,switcher=1; // Note change
var nmax=2;
function timer()
{
window.setInterval(function ()
{
if(switcher){ // Note change
n+=1;
}
else{ // Note change
n--; // Note change
} // Note change
if(n>=nmax) // Note change
{
switcher=0; // Note change
}
if(n<=0) // Note change
{
switcher=1; // Note change
}
$('#slideImage').animate({left:''+(n)*(1366)*(-1)+'px'},500); // Note change
},2500);
}
$(document).ready(function(e) {
timer();
});
</script>
<style type="text/css">
.des_p{height: 400px; width: 1366px;float: left; }
.wn_p { height: 400px; width: 1366px; float: left; }
.w_n { height: 400px; width: 100%; overflow: hidden; background-color: #09C; }
.w_n2 { height: 400px; width: 2732px; margin-right: auto;
margin-left: auto; position: relative; display: inline-table;
transition: linear 0.75s 0.2s; -moz-transition: linear 0.75s 0.2s;
-webkit-transition: linear 0.75s 0.2s; }
</style>
</head>
<body>
<div class="w_n">
<div class="w_n2" id="slideImage">
<div class="hd_p">
<img name="shift" src="image/bn2.jpg" class="wn_p" />
<div class="des_p">The company maintains high quality standard in all its operations. With high production capacity, the policy thrust is to continue to provide cost-effective, affordable, local alternatives of life saving drugs to the teaming population.
</div>
</div>
<img name="shift" src="image/bn3.jpg" class="wn_p" style="position:absolute; top:0px; left:2732px;" /><!-- Note change -->
</div>
</div>
</body>
</html>
actually problem was not in your js but it was in your css due to low height overflow was hidden..
i fixed that by using positioning of element in css..
according to your last comment i've updated answer for sliding images in both direction.
please pay attention in the lines marked by Note change at end.
hope it'll help you. cheers !!
try it
$(document).ready(function() {
$('#slideImage').animate({left: '-200px'},2500);
});
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have the beginnings of a simple game in JavaScript, CSS and HTML and the game was working until I created a jump function. OnClick, the character element (generated by the css as the green rectangle) should jump. Instead, it is static and doesn't move.
Initially, I had this code:
.animate{
animation: jump 500ms;
}
in the character's CSS, and it jumped continuously without any user interaction.
What have I done wrong? I assume it is something to do with this:
function jump(){
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},500);
}
For an answer, I would appreciate the error to be pointed out, with new code and a clear explanation as to how the setTimeout function works. Is setTimeout an existing inbuilt method, and if so where do we find documentation on these things?
CODE
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
//adding the animate function in the css here, so it is applied to our character
function jump() {
character.classList.add("animate");
setTimeout(function() {
character.classList.remove("animate");
}, 500);
}
* {
padding: 0;
margin: 22;
}
#game {
width: 500px;
height: 500px;
border: 1px solid #319b4e;
}
#character {
width: 30px;
height: 120px;
background-color: green;
position: relative;
top: 380px;
border-radius: 20px;
/*animation: jump 500ms */
}
/* new class called animate */
.animate {
animation: jump 500ms;
}
#enemy {
width: 60px;
height: 60px;
background-color: red;
border-radius: 14px;
position: relative;
top: 320px;
left: 440px;
animation: moveenemy 1s infinite linear;
}
#keyframes moveenemy {
0% {
left: 440px;
}
50% {
top: 58px;
}
100% {
left: 0px;
top: 320x;
}
}
#keyframes jump {
0% {
top: 380px;
}
30% {
top: 200px;
}
50% {
top: 200px;
}
100% {
top: 380px;
}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game</h1>
<p>My first ever game</p>
<p>We all have an enemy</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
The issue, after copying the code and testing it, is that the term
document.getElementById was spelled with a lowercase b, like document.getElementbyId, these two lines should instead be:
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");`
As for setTimeout, it is a built in function , that executes a function (provided in first paramter) after a certain amount of time (specified in second parameter), this function works in the background, so it doesn't block other things from happening.
For more information on setTimeout (I used this website when I first started learning html etc....)
If you want to change it to the up arrow instead, simply add an event listener to check for the keyup event, and check that the keycode matches that for the up arrow (38), and other keys can be checked by console.loging the keyCode for the event, so somewhere in your JavaScript, do
addEventListener("keyup", function(e) {
if(e.keyCode == 38) jump()
})
So...
The entire snippet is
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
//adding the animate function in the css here, so it is applied to our character
function jump(){
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},500);
}
addEventListener("keyup", function(e) {
if(e.keyCode == 38) jump()
})
*{
padding:0;
margin:22;
}
#game{
width:500px;
height:500px;
border:1px solid #319b4e;
}
#character{
width:30px;
height:120px;
background-color:green;
position:relative;
top:380px;
border-radius:20px;
/*animation: jump 500ms */
}
/* new class called animate */
.animate{
animation: jump 500ms;
}
#enemy{
width:60px;
height:60px;
background-color:red;
border-radius:14px;
position:relative;
top:320px;
left:440px;
animation: moveenemy 1s infinite linear;
}
#keyframes moveenemy{
0%{left:440px;}
50%{top:58px;}
100%{left:0px; top:320x;}
}
#keyframes jump{
0%{top:380px;}
30%{top:200px;}
50%{top:200px;}
100%{top:380px;}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game</h1>
<p>My first ever game</p>
<p>We all have an enemy</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Now working
Issue is:your write document.getElementbyId("character") but character b of getElementbyid is small so it through error
so correct is document.getElementById("character")
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
//adding the animate function in the css here, so it is applied to our character
function jump(){
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},500);
}
*{
padding:0;
margin:22;
}
#game{
width:500px;
height:500px;
border:1px solid #319b4e;
}
#character{
width:30px;
height:120px;
background-color:green;
position:relative;
top:380px;
border-radius:20px;
/*animation: jump 500ms */
}
/* new class called animate */
.animate{
animation: jump 500ms;
}
#enemy{
width:60px;
height:60px;
background-color:red;
border-radius:14px;
position:relative;
top:320px;
left:440px;
animation: moveenemy 1s infinite linear;
}
#keyframes moveenemy{
0%{left:440px;}
50%{top:58px;}
100%{left:0px; top:320x;}
}
#keyframes jump{
0%{top:380px;}
30%{top:200px;}
50%{top:200px;}
100%{top:380px;}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game</h1>
<p>My first ever game</p>
<p>We all have an enemy</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Is setTimeout an existing inbuilt method, and if so where do we find documentation on these things?
Yes, setTimeout is an inbuilt method. You can learn about more in here MDN Web Docs.
how the setTimeout function works
So, setTimeout method accepts a function/code and a delay (in ms) after which it will execute it. Refer to the above link.
It takes the event into event loop that will make it async call.
I will look into the code after a while and get back to you! :D
Bookmark MDN Web Docs, it is really handy!
I would like to replace the content of a modal popup dynamically, and it do a smooth transition between the old size and the new size.
I thought I may be able to do this using CSS transition, however I have been unsuccessful so far.
My setup is something similar to the JS fiddle here, where I have a container, and I swap out the inner content with different width and height.
http://jsfiddle.net/Lsf76eby/24/
html
<input type="button" value="press me" onclick="changeDiv()" />
<div id="container">
<div id="a">
</div>
</div>
js
function changeDiv(){
var b = $('<div id="b">');
$('#container').empty().append(b);
}
css
#container{
transition: 2s;
height: auto;
}
#a {
height: 200px;
width: 200px;
background:blue;
}
#b {
height: 400px;
width: 300px;
background:red;
}
I made a few changes in a fork of the fiddle here. You can read more about this from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
I added a new javascript function, added a css property, and reorganized the css a little
You must define all the properties you will make subject to the transition using transition-property
One significant change is that my javascript function (as adapted from MDN) switches classes on a single div rather than switching the div itself.
Hope this helps!
html
<div id="container">
<div id="target" class="a">
</div>
</div>
javascript
//pretty much straight from the MDN doc...
function updateTransition() {
var el = document.querySelector("div.a");
if (el) {
el.className = "b";
} else {
el = document.querySelector("div.b");
el.className = "a";
}
return el;
}
css
#container{
height: auto;
}
#target{
transition: 2s;
transition-property: width height background-color;
}
.a {
height: 200px;
width: 200px;
background-color:blue;
}
.b {
height: 400px;
width: 300px;
background-color:red;
}
This is my piece of HTML code
<div class='qna_div'>
<div class="q_div"></div>
<div class="a_div"></div>
</div>
I make a Ajax request and get a json response for every click by the user and i append the q_div and a_div using the jquery function
$('.q_div').append(data.question);
$('.a_div').append(data.answer);
I have css keyframe animation on both q_div and a_div to come from right to left of the screen. But the animation works only on the first load of the page and not on the 'append' function for the json response. I am new to css and animations. help me out for the responsive animations
animation in css3 code:
.q_div {
animation: q_ani 2s;
}
#keyframes q_ani {
from{margin-left: 50px;}
to{margin-left: default;}
}
a possible solution using css animation
$(function() {
var cssAnimationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
$('.click').click(function() {
$('.q_div, .a_div').addClass("animate").one(cssAnimationEnd , function() {
$('.q_div, .a_div').removeClass("animate");
});
});
})
.q_div.animate {
animation: q_ani 2s;
}
.a_div.animate {
animation: q_ani 2s;
}
#keyframes q_ani {
from {
margin-left: 150%;
}
to {
margin-left: default;
}
}
/*for test purpose*/
.q_div,
.a_div {
position: relative;
height: 20px;
width: 500px;
background: #ddd;
margin-top: 10px;
}
.qna_div {
padding: 20px;
width: 500px;
background: #333;
}
body {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">go</button>
<div class='qna_div'>
<div class="q_div"></div>
<div class="a_div"></div>
</div>
You should delete and add .q_div class each time you need animation appear
You could use jquery to animate your divs. Put this code in the success ajax callback:
// First put your divs to the right
$('.q_div, .a_div').css('right','0');
// Do the animation
$('.q_div, .a_div').animate({
left: 0,
}, 1000);
https://jsfiddle.net/a8cq9yj1/1/
I hope it can help you,i just simple using the classList function and some SASS style rule
http://jsbin.com/vosuvam/2/edit?js,output
I want to remove div with a great animation but I don't know how to do this.
So I make that fiddle for example :
HTML
<h2>What I have</h2>
<div class='test'>1</div>
<div class='test'>2</div>
<div class='test'>3</div>
<div class='test'>4</div>
<div class='test'>5</div>
<h2>What I Want</h2>
<div class='test2'>1</div>
<div class='test2'>2</div>
<div class='test2'>3</div>
<div class='test2'>4</div>
<div class='test2'>5</div>
CSS
div.test, div.test2 {
display:inline-block;
padding: 20px;
margin:5px;
border:1px solid black;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
JS
$('div.test').on('click', function() {
$(this).remove();
});
$('div.test2').on('click', function() {
// I don't want to change opacity or padding...
// I just want to remove with animation like this:
$(this).css('width','0px').css('padding','0px');
$(this).css('opacity',0);
});
I see a good example here
But when a div is removed, she's cut and they are only animation for the next div.
Any idea ?
EDIT
Finally resolved : Jsfiddle
Since you remove your element, it cannot be animated anymore. You could animate via a class and on transitionend remove the element. Like this for example:
.animate
{
height: 0px;//or anything you need
transition: height 1s;
}
$('#delete').click(function (e) {
//instead of remove you add a class.
$(".notification:first-child").addClass('animate');
});
$('.notification').on('transitionend', function(e){
//when transition is finished you remove the element.
$(e.target).remove()
});
http://jsfiddle.net/nawkufh1/
You could do it like this:
$('#delete').click(function (e) {
$(".notification:first-child").slideUp(function() {
$(this).remove();
});
});
$('#add').click(function (e) {
$(".notifications").append("<div class='notification'></div>");
});
.notifications {
left: 0px;
top: 0px;
width: 400px;
height: 300px;
position: relative;
border: solid 1px green;
}
.notification {
height: 40px;
background: lightblue;
margin: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button type="button" id="delete">delete</button>
<button type="button" id="add">add</button>
<div class="notifications">
<div class="notification"></div>
<div class="notification"></div>
<div class="notification"></div>
<div class="notification"></div>
</div>
This uses jQuery to animate instead of CSS. When the delete button is clicked, it slides the top bar up then it gets removed.
I've solved my problem with animation JsFiddle
Thanks all for your help.
this is probably very simple using javascript or jquery, but I cannot wrap my head around it. I am providing a sample using a simple css box with a :hover applied in a different color. I want the box to go about the hover as it normally would, but then want the hover to last a set amount of time, regardless of mouse movement after hover. After the set time has finished, I would like the hover to reset as normal. Also if the user were to accidentally hover over the #box while the hover is being held it will not reset, it will continue to hold until after the set time has finished.
here is my html and css
#box {
width: 200px;
height:300px;
background-color: #00CCFF;
}
#box:hover {
width: 200px;
height:300px;
background-color: #669933;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box" </div>
</body>
CSS
.box-normal {
width: 200px;
height:300px;
background-color: #00CCFF;
}
.box-hover {
width: 200px;
height:300px;
background-color: #669933;
}
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box" class="box-normal"> dsfdsf</div>
</body>
JQuery
$(function() {
var delayms = 2000;
$("#box").mouseenter(function(){
if ($("#box").hasClass('box-normal'))
{
$("#box").removeClass('box-normal').addClass('box-hover');
window.setTimeout(function() {
$("#box").removeClass('box-hover').addClass('box-normal');
}, delayms);
}
});
});
You can change the "delayms" variable. ( 2000 means 2 seconds)
Working example: http://jsfiddle.net/jqT7d/1/
Also jfriend00 suggests a simpler version: http://jsfiddle.net/jfriend00/jqT7d/3/
ul.navigator-wrap-inner li.thumbnail_resize:hover {
border-color:#184ACD;
-moz-transition: border-color 0.4s ease-in-out 0s;
}