Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Posted May 11, 2015 5:44am by

jquery animate question

So I have a code example here.

My question is how do I keep #box1 from moving further and further down? I just want it to slide down once when I click "Show" and then slide back up when I click "Hide". When I click "Show" more than once it just keeps going down. Halpp!

<div class="clickme">
  <a href="#" id="hide">Hide</a>
</div>


<div class="clickme">
  <a href="#" id="show">Show</a>
</div>

<div id="box1">
  <span>stahhpp</span>
</div>

a{  
 text-decoration: none;
  color: #FFF;
}

.clickme {
  background: #E05C5C;
  width: 40px;
  height: 20px;
  color: #FFF;
  padding: 10px;
  margin: 20px;
}

#box1 {
  position: absolute;
  background: #489fd7;
  width: 200px;
  height: 100px;
  color: #FFF;
  padding: 20px;
}

$(document).ready(function(){
    $('a#hide').click(function(){
        $('#box1').hide();
        $('#container').show();
    })

    $('a#show').click(function(){
        $('#box1').show().animate(
        {'top': '+=155px'}, 500);       

        $('#container').hide();
    })
});

3 Answers

May 11, 2015 6:21am

Hey Roven,

Here is a snapshot of a Workspace I drew up using your code as a base. I only had to modify a few things to get to this work as expected. Check out the comments within the "index.html" file: https://w.trhou.se/az9mcy6ola

May 11, 2015 9:20am

Hey thanks a lot man! it works perfectly! I really appreciate it :)

If you dont mind, I wana add one more thing. (Sorry if I'm asking too much, I'm new to javascript.) How do I add some sort of "Fade" effect? So that it slides and fades.

Thank you once again Marcus!

May 11, 2015 10:25am

You're welcome! :D I'm always glad to help out :)

For that, you can just add in an opacity animation to each click event handler and set the default opacity to 0 in the CSS. Then, when you click the "show" event handler, animate the opacity to 1. When you click hide, animate the opacity to 0. Badda boom badda bing! :D

May 11, 2015 1:19pm

Hi Roven Loo,

Marcus Parsons, while your code solved the issue it's still overly complicated for what needs to be achieved. In a couple of minutes I came up with the following which works as expected.

<div class="clickme">
  <a href="#" id="toggle-box">Toggle Box</a>
</div>

<div id="box1">
  <span>stahhpp</span>
</div>

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>

  var $box = $('#box1');

  $('#toggle-box').on('click', function(e) {
    // Prevent the default action of the anchor link
    e.preventDefault();

    // Toggle the display state and height of the box if it's not animated
    if (!$box.is(':animated') && !$box.data('is-open')) {
      $box.show().animate({top: '+=155px'}, 1500, function() {
        $box.data('is-open', true);
      });
    } else {
      $box.animate({top: '-=155px'}, 1500, function() {
        $box.hide().data('is-open', false);
      });
    }
  });

</script>

The major difference you can see is instead of two buttons I've switched the code to a single toggle button and have reduced the two click events to one which results in cleaner and more readable code. I understand that you may still be new to JavaScript and jQuery in general but this is just a simple example of how you can reduce the amount of code you need to use for simple tasks.

Let me know if you have any questions.

May 11, 2015 4:40pm

Chris,

It's really funny that you say my version is overly complicated and less readable because your version is overly complicated, less readable, and goes against what the user wanted to do. I didn't fundamentally change his code. I modified his code to work in a very simple way. Roven did not say he wanted a toggle box, which doesn't even make sense because no one is going to know what "toggle box" is supposed to mean. That is a bad user experience.

I am certainly no novice to JavaScript at all. In fact, I've been to your website, and there's nothing there that suggests to me that you have anything beyond basic knowledge of JavaScript. Where are the projects you've worked on that give you this air of authority with JavaScript?

And furthermore it is incredibly insulting of you to say that you think I'm a novice at JavaScript and jQuery, especially since you are a moderator. You keep trying to come in and override everything I say on every single thread I've posted on. It's getting past the point of ridiculous.

Roven wanted to have two buttons, one to hide and one to show, and that is what I delivered. I didn't try to override what he wanted because I have some inflated ego. And my code is far and above more simple than your own code and works as Roven wanted. Thank you for your code, but it is too convoluted and unnecessary for this simple question.

May 12, 2015 11:35am

Hi Marcus Parsons,

First and foremost, everyone here on the Treehouse forums and entitled to posting on any thread they choose whether it be answered or not, I'm not going to argue with you here as that's not why I was picked by Faye to join the moderation team.

The response I added simply gives an alternate look at the problem and solves it another way, I had no intention of discrediting you as I often give my 2 cents as an offering to many students here on Treehouse which provides insight and gives them knowledge they otherwise didn't have previously.

I did not mean to cause you any offence and taking it that way shows you don't approve of other peoples input which is what a forum is all about, a community of people offering their time and support with nothing expected in return. I understand you may have seen me as a threat but as a moderator one of my roles is to look out for more friendly faces to join the team but clearly you've shown by attacking me that you have no regard for friendly opinions and replies.

You may attack me, my career as a professional web developer, and others for your own satisfaction; but I'm simply just like you and at the end of the day, a Team Treehouse student. I'm not here to stomp over anyone else, especially someone who shows a great deal and dedication to this community.

If you took the time to step back and see my efforts and support you would find I offer my support to many questions with answers.

Again, I meant no offence to you or your hard work. I hope you understand and accept my apology for assuming your understanding of JavaScript and for making it seem like a personal attack.

May 12, 2015 2:11pm

Chris,

I have no intention of being a moderator as the expectations to be a moderator are unrealistic. I have always been direct when dealing with people and will continue to do so. I have helped hundreds of people on this forum. I have right now close to 300 best answers on my record, because I provide a lot of quality answers and I am willing to work with people to get their problems solved. I don't need to have a moderator status to show that I help people.

I obviously do not just randomly attack people for no reason. If that were the case, I would have attacked Roven, as well, but that didn't happen. Maybe that's because he didn't come to this thread and then intentionally attempt to degrade me. You can try to say all you want that that wasn't your intention, but the fact that you only said "Hi, Roven Loo" and then immediately addressed me, and went on to say that my answer was overly complicated and that I might be new to JavaScript, shows your intentions. You didn't even bother talking to Roven about your solution. You addressed me in the whole of your solution, when instead you should have just posted your solution and left me out of it. My solution is just one solution in a vast assortment of possibilities. There are always multiple ways to do something. But that doesn't mean you should attempt to trod down on someone else because you think you have a better solution.

You can't just call yourself a "professional web developer" if you don't draw a salary from a job in web development. That's like saying you are a soldier, but you're not in your military. Again, what projects have you built that showcase your ability with JavaScript or any other web development language?

I will continue to provide solid, simple, and concise answers, and you can continue to try to override those answers with convoluted and unnecessary solutions. You will not waste my time again. Thanks again. Good day, sir.

May 12, 2015 11:45pm

The attitude shown by you Marcus demonstrates that you have an vendetta against my personal being with no reasoning behind it, as I expressed in my first reply I don't reply to questions to take over, I reply to express my own opinions and answers which is what I've been doing for the past year.

I have right now close to 300 best answers on my record, because I provide a lot of quality answers and I am willing to work with people to get their problems solved.

I'm not here for best answers, you saying that clearly proves you have an ulterior motive which you won't admit to, the time I give to Treehouse is that of free time I could use elsewhere but I choose to dedicate it here to students in need of answers and advice.

You can't just call yourself a "professional web developer" if you don't draw a salary from a job in web development.

I do not take lightly you personal attacks that have no solid ground or factual proof, I have worked very hard to get to where I am so please do your research before making blunt accusations.

https://au.linkedin.com/in/chrisupjohnaus

To Faye Bridge and Roven Loo,

I'm sorry this question has jumped off the rails so much, I did nothing to deserve what is being handed to me as Marcus clearly shows no interest in others opinions on questions he replies to.

May 13, 2015 12:45am

Chris,

It is okay to cry every once in a while, and if you need a shoulder to rest on, I will be that shoulder for you. :)

May 13, 2015 12:53am

I will now reference what you were saying, Chris. I do not have a vendetta against you. I take issue with you coming on to a post and instead of just trying to get Roven to see the solution you made up, you clearly attacked me in your first post. You talked to me the entire post. You did not talk to the original questioner at all besides to say "Hi, Roven Loo". I think that is beyond ridiculous. If you would have posted your solution and not called me out like you did, this would have all been avoided.

Because I listed off the amount of best answers I have, that means I have an ulterior motive for helping out? That's a ludicrous accusation! That number shows that my help has been significant on these forums. Please, praytell, what would that motive be in your mind? I've devoted a lot of my time to helping out on these forums with no return of any kind. I have helped a lot of people just to help out.

The whole point of this is that you should have left me out, and you were obviously in the wrong for what you said. When you present solutions, you should leave the other person out of it. Period.

May 13, 2015 4:38am

I also wanted to share with you, Chris, the example of a great moderator: Jason Anello. He never brings someone personal details into an answer. When he criticizes, he does so in a friendly manner. This is a perfect example of an interaction between me and Jason, where Jason had proved me wrong. Notice that he didn't call into question anything about me during the entire thread. https://teamtreehouse.com/forum/how-to-remove-irremovable-white-space-at-the-top

May 13, 2015 4:58am

Marcus, I will try this last time to prove my post was not an attack.

This is an open forum, free to opinions from anyone
my opinion offered an alternate solution to a problem, even if that problem already had a solution
you attacked me for expressing my opinion
you attacked me for claiming to be someone you thought I was not (you made it personal, not me)
I tried to peacefully resolve the situation, you continued to make it worse

At the end of the day I tried to provide insight into another way of writing the code in which Roven supplied, and that you helped make work. You chose to see it as an direct attack and continued to do so even after my apology, judging me against other moderators isn't helping your case, again, I tried to do the right thing and you declined to understand. I honestly can't say anymore as you don't seem interested in listening.

May 13, 2015 5:14am

I am showing you the example of a very good moderator, Chris. The kind you should strive to be, I would hope. But I wasn't the first to tag someone who had no part in this discussion. That would be yourself. Oh, look at the pot calling the kettle black, as they say.

May 11, 2015 12:03pm

Wow haha works perfectly! Thank you so much! You really helped me out big time :D I really appreciate it man. Cheers :)

May 11, 2015 8:00pm

Sorry I'm late in commenting to you, Roven. Chris Upjohn is an incredibly rude moderator who likes to push his own solutions on to people after their problems have been solved. Regardless, you are very welcome, and I am always happy to help out. :)

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Roven Loo

Roven Loo

jquery animate question

3 Answers

Marcus Parsons

Marcus Parsons

Roven Loo

Roven Loo

Marcus Parsons

Marcus Parsons

Chris Shaw

Chris Shaw

Marcus Parsons

Marcus Parsons

Chris Shaw

Chris Shaw

Marcus Parsons

Marcus Parsons

Chris Shaw

Chris Shaw

Marcus Parsons

Marcus Parsons

Marcus Parsons

Marcus Parsons

Marcus Parsons

Marcus Parsons

Chris Shaw

Chris Shaw

Marcus Parsons

Marcus Parsons

Roven Loo

Roven Loo

Marcus Parsons

Marcus Parsons