Main content
Computer programming
Course: Computer programming > Unit 7
Lesson 7: DOM animation & effects with jQueryReview: DOM animation in jQuery
jQuery provides a number of functions for animation and effects, which are listed in its documentation.
Changing visibility
For simple visibility changes, you can use
hide() and show():$("#pic").hide();$("#pic").show();
(See example)You can also use
toggle(), which will decide whether to show or hide based on the current state:
$("#pic").toggle(); (See example)You can pass a duration into any of those functions, and jQuery will then animate the changing of the visibility:
$("#pic").toggle(1000);You can also use
slideDown(), slideUp() and slideToggle() for sliding effects (See example) or fadeIn(), fadeOut() and fadeToggle() for fading effects
(See example).You can pass a callback function as the second parameter to any of those functions, and jQuery will call that callback function when the animation is complete:
$("#pic").toggle(1000, function() {
$("body").append("It's here!");
});You can also chain multiple effects together and call
delay() if you'd like a delay between them:$("#pic").slideUp(300).delay().fadeIn();Custom animation
If you'd like to animate specific CSS properties, you can use
animate(): $("#pic").animate({
width: "70%",
opacity: 0.7,
padding: 20
}, 1000);Note that you can only animate CSS properties that take numeric values - so you can't use this to animate properties like 'color'. (See example)
You can also attach various callback functions in
animate(), if you'd like to find out when the animation has progressed or is complete. Check the documentation for more details.Animating responsibly
Animations should always improve the user experience, not make it worse. Animations should help users understand something about the state of your web app or add a touch of fun - they should not slow down the experience unnecessarily and frustrate the user. You can ask users for feedback about your use of animations or work with a designer to decide how and where to animate.
If you know your user is on a device that doesn't perform well with animations, you can set
$.fx.off to true.Want to join the conversation?
i'm really stressed out with this slideshow project. Is there a link to a completed project that I could use as a reference? The 'browse projects' section isn't very user friendly; i can only scroll through all completed projects and cannot search by a specific spin-off(13 votes)
I am having difficulty with the previous project. Can anyone tell me what I am supposed to select for the h1 where it says "Aqualine"?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Animated Avatar</title>
<style>
body {
background: black;
color: rgb(102, 181, 217);
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="avatar">
<img src="https://www.kasandbox.org/programming-images/avatars/aqualine-sapling.png" width="150">
<h1>Aqualine</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$("img").animate({
width: "400px"
}, 1500);
$("").animate({
width: "400px"
}, 1500);
</script>
</body>
</html>(2 votes)
There was a tip in the initial task description which goes like this: "Try using a CSS 'descendant selector' to select the image".
The reason why the tip was given is that the image we had to animate didn't have any CSS class or ID.
To animate the image (1st step of the task) you were to select it like this - $(".avatar img"). Now, based on this example, can you guess what you are supposed to select for the h1?(11 votes)
I need some help with the project. I tried to use if statements, but they don't seem to work very well. Is there a reason for this.(1 vote)
An if statement is part of processingJS, what khan teaches as normal.
This is jQuery where some things were borrowed from processingJS, but not if statements or drawing (goodby to rect, ellipse...) or a lot of other things.
However, it gives the ability to work between JS & HTML.
Hope this helps!(1 vote)
I've stored the images in a jquery collectionn:var $myImgs = $("img")
Now I want to hide the first image with this:var $myImgs[0].hide()
Why doesn't this work?(1 vote)
First of all, you need to get rid of thatvarin front of$myImgs[0].hide(). JS thinks you're trying to create a variable with the name$myImgs[0].hide(), which is not a valid identifier.
If you want to use.hide()on an element in your collection, you'll use$()on it first. Replacevar $myImgs[0].hide()with$($myImgs[0]).hide();.(4 votes)
I'm having problems with the project. Can somebody help me understand how to make a slideshow, just using pure jQuery (without adding more libraries)?<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project: Interactive slideshow</title>
<style>
body {
background-color: lightblue;
}
.btn {
margin: 162px 126px;
border-radius: 20px;
background-color: rgb(156, 155, 154);
border-style: solid;
border-color: red;
}
.btn:hover {
height: 43px;
font-size: 15px;
background-color: white;
cursor: pointer;
}
img {
width:182px;
}
</style>
</head>
<body>
<br>
<button class="btn" id="p" type="button">Prev</button>
<img id="1" src="https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png" height="129" alt="Birds: rainbow lorakeets">
<img id="2" src="https://www.kasandbox.org/programming-images/seasonal/xmas-ornaments.png" alt="An snowy slope with trees">
<img id="3" src="https://www.kasandbox.org/programming-images/seasonal/fireworks-in-sky.png" alt="Fireworks in the sky">
<img id="4" src="https://www.kasandbox.org/programming-images/seasonal/reindeer.png" alt="A reindeer">
<button class="btn" id="n" type="button">Next</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$prev = $("#p");
$next = $("#n");
$("img").hide();
$next.on("click", function(){
$("img").next()
.slideShow()
.css("display", "auto");
});
/** $prev.on("click", function(){
$("img").prev()
.slideShow()
.css("display", "auto");
}); **/
</script>
</body>
</html>(2 votes)
Why is the previous button not working? https://www.khanacademy.org/computer-programming/project-interactive-slideshow/5922539759534080(2 votes)- I greatly need help. I'm working on a fake shopping website for fun, and have some jQuery in a .js file. The jQuery is's working for one of my pages, but not the other. I'm using the jQuery to strikethrough a price in
spantags which have a class of Span, put a line break after that price, then hide two of three discounted prices and show the other (these are also inspantags, and one has a class of 25, one of 50, and one of 75).
Here's my jQuery code:$(".Span").wrapInner("<s></s>");
$(".Span").append("<br>");
$(".25, .75").hide();
$(".50").show();
Here's the code that the jQuery works on:<b>Price:</b> <span class="Span">$49.99</span>
<span class="25">$37.49</span><span class="50">$24.99</span><span class="75">$12.49</span><br>
Here's the code it doesn't work on:<b>Price:</b> <span class="Span">$74.99</span>
<span class="25">$56.24</span><span class="50">$37.49</span><span class="75">$18.74</span><br>
If someone can help me with my problem I'd greatly appreciate it!(2 votes) - Hi everyone. I'm having a bit of trouble on adding some animation on my interactive slideshow project. I've decided to code it as an array of images, but really don't know yet how to add, for example, a fadeIn() method every transition of the image. Any help would be appreciated. Here's my code:
<html>
<head>
<meta charset="utf-8">
<style>
#slideshow {
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
left: 50px;
}
#slider {
width:300px;
}
</style>
</head>
<body>
<div id="slideshow">
<button id="prevButton">Prev</button>
<img id="slider" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Litoral_de_Portugal.jpg/250px-Litoral_de_Portugal.jpg">
<button id="nextButton">Next</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var images = [
'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Litoral_de_Portugal.jpg/250px-Litoral_de_Portugal.jpg',
'https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Seashore_of_Fortaleza_%282%29.jpg/250px-Seashore_of_Fortaleza_%282%29.jpg',
'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Praia-da-Ponta-Negra-Manaus-Orla.jpg/250px-Praia-da-Ponta-Negra-Manaus-Orla.jpg'
];
var num = 0;
var $slider = $('#slider');
var $prevButton = $('#prevButton');
var $nextButton = $('#nextButton');
var next = function() {
num++;
if(num >= images.length) {
num = 0;
}
$slider.attr("src", images[num]);
}
var prev = function() {
num--;
if(num < 0) {
num = images.length-1;
}
$slider.attr("src", images[num]);
}
$prevButton.on("click", prev);
$nextButton.on("click", next);(2 votes) 
Is there a fadeOut(); rule?
I think there is, but I'm not sure.(1 vote)
The Java Script library jQuery has .fadeIn() and .fadeOut methods, which are animated versions of .show() and .hide().
Hope this helps!
- Convenient Colleague(2 votes)
- Can someone help me figure out what to do on the next project??
my code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project: Interactive slideshow</title>
<style>
body {
background-color: Grey;
}
.bt {
margin: 160px 120px;
border-style: solid;
border-color: pink;
}
img {
width: 182px;
}
</style>
</head>
<body>
<br>
<button class="bt" id= "p" type="buttom">Prev </button>
<img id= "1" src="https://www.kasandbox.org/programming-images/food/mushroom.png" width="400" alt="Mushrooms">
<img id = "2" src="https://www.kasandbox.org/programming-images/landscapes/beach-at-dusk.png" width="400" alt="Beach View">
<img id= "3" src="https://www.kasandbox.org/programming-images/landscapes/lava.png" width="400" alt="Lava">
<img id= "4" src="https://www.kasandbox.org/programming-images/landscapes/waterfall_niagara-falls.png" width="400" alt="Waterfall">
<button class= "bt" id= "n" type="button">Next ➡</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$("img").hide();
$("img").slideDown();
$prev = $("#p");
$next = $("#n");
$("img").hide();
$next.on("click", function(){
$("img").next()
.slideShow()
.css("display", "auto");
});
$prev.on("click", function(){
$("img").prev()
.slideShow()
.css("display", "auto");
});
</script>
</body>
</html>
I am stuck and do not know how to make the buttons work to make it where i click them and the Images come up like a slide show which is what it is asking.(2 votes)
You spelled the word button buttom on line 25.
To make the slide show you need to make a couple variables and store a function in each one. Then in the function add the picture source. Once you did all that create an event listener for all your pictures. and declare your variables in it.
Here is how I did it:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$("img").hide();
$("img").slideDown();
var nextSlide = function() {$("img").attr("src", "https://www.kasandbox.org/programming-images/animals/crocodiles.png");
};
var prevSlide = function() {$("img").attr("src", "https://www.kasandbox.org/programming-images/food/mushroom.png")};
$("#next").on("click", function() {
nextSlide();
});
$("#prev").on("click", function() {
prevSlide();
});
</script>
I hope this helps!(0 votes)
