JQuery Effects

Question 1

The hide and show methods are great, but is one method that has the ability to do both? Write out an example using it.

Answer 1

$(‘.toggle-button’).on(‘click’, () => {
$(‘.first-image’).toggle();
})

Question 2

How could you make the a button with a an class of ‘fade-out-button’ fade out when clicked on, and have it fade out with a duration of 4000 miliseconds?

Answer 2

$(‘.fade-out-button’).on(‘click’, () => {
$(‘.fade-image’).fadeOut(4000);
})

Question 3

Say you want to have the duration of a fade out effect on an element to be the same as the duration for the fade in element. How could you do this?

Answer 3

$(‘.fade-toggle-button’).on(‘click’, () => {
$(‘.fade-image’).fadeToggle(“fast”);
})

Question 4

You have an element of the ‘menu-button’ class, how can you reveal it’s content, with a sliding down effect when clicked? Now what method can you use that will make it slide up and down?

Answer 4

$(‘.menu-button’).on(‘click’m () => {
$(.’menu-content’).slideDown(1000);
})

$(‘.menu-button’).on(‘click’, () => {
$(‘.menu-content’).slideToggle(‘slow’);
})

Question 5

If you wanted to lets say show all three buttons when one button is clicked, how could you do this?

Answer 5

$(.’smiley’).on(‘click’, () => {
$(.wrong-text-one, .wrong-text-two, .wrong-text-three).show();
})

Question 6

Show a class of ‘error’ only if the page has certain content/text showing.

Answer 6

if ($(“div:contains”(‘Invalid Email or password.’)”).length) {
$(‘.error’).show();
}