Can someone please help me with this?


#1

Ok, so what I am trying to do is make a present disappear when you click on it and have a toy or image appear. Ive looked all over the sites and can't find a good explanation for how to fade an image out and have another one fade in. here is my full code:











Christmas Cookies


Christmas Cookies

width="125" height="125">

It wouldn't be Christmas without warm, rich, delicious cookies to leave for Santa! (and

of course, maybe to much on :))




Christmas Dinner


Christmas Food
What better way to celebrate the holiday with a nice, Christmas feast!



Gingerbread Houses


alt="Gingerbread House" width="125" height="125">

Is there any better way to treat yourself right with a delicious Gingerbread House???




Christmas Presents


Christmas </p>

<p>Presents
And who can't wait until Christmas Morning to see if you've been naughty or nice this

year by tearing into some of these!




























































height="45px" width="45px" alt="Christmas Wreath">

A Christmas History


height="45px" width="45px" alt="Christmas Wreath">




The history of Christmas dates back all the way to 354 AD. It is called Christmas, but it is actually a

compound of the words "Christ" and "Mass." Before it was called Christmas, however, it was known as the Feast of

Nativity. Christmas marks the birthdate of Jesus Christ, the main figure in many different religions. Though

celebrated by Christians, there is a very considerable amount of non-Christians that celebrate this holy holiday.

Ever since 1870, Christmas has been a federally-accepted holiday. But it was not always believed that the 25th

was the birth of Jesus Christ. In fact, It was Pope Julius I that chose that date. Other churches, such as Greek

and Russian orthodox, celebrate Christmas 13 days after the 25th. The reason? It is known as the Three Kings Day,

and on this day, the three wise men found Jesus in the manger.












height="60px" width="45px" alt="Christmas Tree">

Customs and Traditions


height="60px" width="45px" alt="Christmas Wreath">



There are many customs and traditions that come with the Christmas season. For most, this is what they look

forward to each year. Here are some of the most popular customs and traditions that take place:


  1. Eggnog

  2. This beverage is egg milk "punch," and is best served chilled. The contents are of milk or cream, sugar,

    and eggs that are whipped to perfection. Eggnog can be purchased with or without alcohol.


  3. Singing Christmas Carols

  4. This is a Christmas Spirit must. Throughout the neighborhoods different citizens and groups will go around
    k
    to different locations and sing the most cherished and memorable Christmas carols. Some people might belong to a

    specific church while others do it out of sheer Christmas spirit. Among these timeless classics include "Dashing

    Through the Snow," "Deck the Halls," "Noel," "Silent Night," and "Jingle Bells."


  5. Pictures with Santa

  6. It wouldn't be Christmas, some would say, without taking a picture with the big guy. The man in charge.

    The one that has a list and checked it not twice, but thrice. Ol' Saint Nick himself, Santa Clause! Conveniently

    stations in each mall, on every corner, on every coke bottle, and in every office party, this beloved icon of

    Christmas pops up as soon as Halloween ends. He is commonly known as the fat, jolly guy witha big white beard

    that slides down chimneys on Christmas Eve to deliver presents to little boys and girls.


  7. Christmas Lights

  8. Christmas lights are definitely a symbol that Christmas time has arrived. Right after Halloween is when

    people start breaking out the
    electricity-increasing lights to decorate the outside of their homes. Over the years, this tradition has surpassed

    anything that we would have
    thought of. Nowadays, it is common to see lights blink and flow with music. To do this, typically someone will

    turn to an appropriate station
    and the lights will dance with any music that is playing, from orchestra to techno to dubstep.


  9. Holiday Movies

  10. What are we going to do when it is too cold to go outside? Many have a solution: Watch Christmas movies!

    That's right, bundling up with
    some popcorn and warm hot chocolate and turning to Lifetime or ABC Family to see Groundhog's Day, The Grinch, Polar

    Express, and of course, the
    ultimate Christmas classics, A Christmas Story and Scrooge. Christmas time has definitely provoked some good (and

    some not-so good) tales about
    love and the Christmas spirit.


  11. Presents Under the Christmas Tree

  12. It is every kid's DREAM to come downstairs on Christmas morning and see the Christmas tree flooded with

    presents while their stocking is
    overflowing with candy and other assorted items. Better get the trashcan because the floor is about to be littered

    with more wrapping paper than
    ever before.




















    xmas tree




    present

    present

    present

    present

    present























    Christmas Lights
    Christmas Lights
    Christmas Lights
    Christmas Lights
    Christmas Lights
    Christmas Lights




#2

Hi @jgemoets,

that's a lot of code :wink: , please keep in mind in cases like this you could always make a codebit and paste to it for review, but I digress. I won't necessarily go through your entire code here, sorry time constraint for me at moment, however I am hoping you may find the following code snippet helpful. Keep in mind that you would want to code this so that you have both the presentElement & toyElement in your markup with one hidden already and one on show, and they should probably be about the same size to avoid odd behavior in your markup etc. but I really just stick with the script code for now :smile:

$(document).ready(function(){
  $('someElement').click(function () {
     $('presentElement').hide();
     $('toyElement').show();
  });
});

Now you can adapt this however you wish; you could use addClass() & removeClass() instead of hide() & show(), or fadeIn() & fadeOut() etc. but essentially the principle is the same, you will apply both actions inside the same function so that they are performed sequentially by the code. Of course keep in mind you could go really advanced and use animates to do this, add some delays for effect etc. but hopefully this gives you an idea of the basic principle for what you can do.

If it may also help a good example of this can be found here at CodeCademy with the tutorial on Make an Interactive website, where you are taken through the steps for making a side menu show and hide.