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

JavaScript

Posted by Pooria Rashidi
Pooria Rashidi
9,740 Points

.hide("slow") briefly causes icon to grow before shrinking

Hi there. If you look at the bottom of this page, I'm having a small issue in the .hasClass() section.

http://sandbox.pixel-j.com/jqueryexperiments/experiments.html

When you click on one of the icons, it briefly increases in height and displaces the other elements at the start of the hide animation. I'd like this to just shrink smoothly, and I'm wondering why it's not.

Here's the html of that section:

<div id="hasClass" class="group">
            <h3>.hasClass()</h3>
            <p><span>.hasClass()</span><br> This method lets you check to see if an element has a specific class. The class that you are checking for goes inside the parenthesis in quotation marks. So if you were checking if a div had a class "orange" it would look like this:<span>$("div").hasClass("orange")</span>You don't have to use a period to denote class, because the method already specifies class.</p>
            <div class="icons">
                <i class="fa fa-hand-peace-o fa-5x orange hand"></i>
                <i class="fa fa-android fa-5x blue logo"></i>
                <i class="fa fa-hand-stop-o fa-5x purple hand"></i>
                <i class="fa fa-apple fa-5x orange logo"></i>
                <i class="fa fa-facebook fa-5x purple logo"></i>
                <i class="fa fa-car fa-5x orange transport"></i>
                <i class="fa fa-plane fa-5x blue transport"></i>
                <i class="fa fa-hand-spock-o fa-5x blue hand"></i>
                <i class="fa fa-motorcycle fa-5x purple transport"></i>
                <h2 class="instruction"></h2>
                <p>Right:<span class="right">0</span></p>
                <p>Wrong:<span class="wrong">0</span></p>
            </div>
        </div>

Here's the javascript:

var classList = ['orange','blue','purple','hand','logo','transport'];
var correctClass;
var counterRight = 0;
var counterWrong = 0;

function setCorrectClass() {
    correctClass = classList[Math.floor(Math.random() * classList.length)];
    $("#hasClass .instruction").text('Click on an icon with this class: "' + correctClass +'"')
}

function isClassCorrect(){
    if ($(this).hasClass(correctClass)){
        counterRight += 1;
        $("#hasClass .right").text(counterRight);
    }else{
        counterWrong += 1;
        $("#hasClass .wrong").text(counterWrong);
    };

    setCorrectClass();
}

setCorrectClass();


$("#hasClass i").click(function(){
    if ($(this).hasClass(correctClass)){
        counterRight += 1;
        $("#hasClass .right").text(counterRight);
    }else{
        counterWrong += 1;
        $("#hasClass .wrong").text(counterWrong);
    };
    $(this).hide("slow");

    setCorrectClass();
});
Giorgi Kiknadze
Giorgi Kiknadze
Courses Plus Student 2,768 Points

try 

.fadeOut('slow');

And also check your javascript files, there should be some code that making this animation.

Pooria Rashidi
Pooria Rashidi
9,740 Points

I don't want to use fadeOut, I want the shrinking hide animation. I know that this is unusual behavior for .hide() so I'm looking for a way to fix it, not an alternative effect.

Giorgi Kiknadze
Giorgi Kiknadze
Courses Plus Student 2,768 Points

I can't make anything without whole website codes, sorry.

Pooria Rashidi
Pooria Rashidi
9,740 Points

Alright, I have added all the relevant html and javascript if that helps, thanks!

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Here's a couple of possible fixes.

I don't have an explanation, but a couple of ways you might fix it. One would be to wrap all the icons in their own div, and then float (left) the icons within it. Then the hide behavior of one will not affect the others.

Another way, and a bit more complicated, would also involve a wrapper but this time serving as a position context. Then the individual icons could be absolutely positioned within it.

I'd love to see an actual explanation for this odd behavior if anyone knows.