CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
mayaah
mayaah

Reputation: 315

When hover over text, the text goes down and then back up

It's best I show this through a jsfiddle:

https://jsfiddle.net/aajvmLxq/

HTML:

<span class="there">WHY</span><span class="expand">does</span><span class="there">THIS</span><span class="expand">notwork</span>

CSS:

.there {
    font-weight: 300;

}

.expand {
     display: none;
}

JS/JQUERY:

$(".there").hover(function() {
    $(".expand").show(1000);
});

That's just the js, but it could be something wrong with the css or html.

As you can see, as the text expands the "WHY" and "THIS" slide horizontally at first but at the end it goes down and back up. Why is this? How do I fix it so it all slides horizontally? Thank you!

Upvotes: 2

Views: 227

Answers (3)

guest271314
guest271314

Reputation: 1

.show() also changes height of element .

Try substituting .fadeTo() for .show()

$(".expand").fadeTo(1000, 1);

jsfiddle https://jsfiddle.net/aajvmLxq/5/

Upvotes: 1

Griffith
Griffith

Reputation: 3217

You need to give the same alignment to those <span>

.there {
    font-weight: 300;
    vertical-align: top;
}

.expand {
    display: none;
    vertical-align: top;
}

Upvotes: 0

Viktor Maksimov
Viktor Maksimov

Reputation: 1465

You should float the elements in order it to work correctly:

.there {
    font-weight: 300;
    float:left;
}

.expand {
    display: none;
    float: left;
}

It is happening because $(".expand").show(6000); animates the height and width of the elements from zero to their actual size. And when it's almost in their actual size a little moving appears because of the change.

Upvotes: 1

Related Questions