Accordion effect on mouseover with transitions is shaky

StackOverflow https://stackoverflow.com/questions/18905418

Question

For a small project, I need this little website that pulls data from a server via AJAX and outputs it like shown in this picture. However the problem isn't JavaScript, but pure HTML+CSS..

enter image description here

You can take a look at this page via jsfiddle by clicking this, or you can take a look at the quoted code that is quoted by the end of this post: http://jsfiddle.net/RdJUM/

The list is build with the following html snippet:

<div id="update">
    <ul class="searchresults">
        <li>
            <h2>Caption</h2>
            <div>
                <img src="" alt="" />
                <p>Text</p>
            </div>
        </li>
    </ul>
</div>

It is formatted via CSS, but the important part is this:

#update ul li {
    height: 110px;
    overflow: hidden;
    /* ... */       

    /*
    -webkit-transition: height 0.3s ease-out;
    -moz-transition: height 0.3s ease-out;
    -o-transition: height 0.3s ease-out;
    transition: height 0.3s ease-out;
    */
}

#update li:hover {
    height: auto;
}

This works fine as long as you leave the transitions commented out. You hover on the article and it will scale the height to "auto" which gives exactly the height of your content and nothing more. However if you uncomment the transistions, WebKit (Chrome 30, Safari 6) do a really shaky effect that is completely unusable. For convenience this is the jsfiddle link to the uncommented version: http://jsfiddle.net/bQZ7F/

In Firefox 23 and Opera 12 this transition is deactivated, so it will behave as if the CSS part wasn't there.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Live Search</title>
    <link rel="stylesheet" href="mystyle.css" />
</head>
<body>
<div id="searcharea">
    <label for="search">live search</label>
    <p>Enter the name or info about a speaker</p>
    <input type="search" name="search" id="search" placeholder="name or info" />
</div>
<div id="update">
    <ul class="searchresults">
        <li>
            <h2>Lorem Ipsum</h2>
            <div>
                <img src="http://placehold.it/80x80" alt="" />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper dui sit amet erat faucibus egestas. Vivamus eget commodo ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ac magna metus. Donec eget auctor lorem. Cras vehicula nulla quis facilisis ultrices. Duis bibendum tellus ut porta suscipit. Pellentesque vitae orci a orci tincidunt posuere at et quam. Aliquam erat volutpat. Etiam dignissim egestas arcu non lacinia. Sed placerat sagittis enim eget bibendum. Suspendisse mollis consequat libero, ut porttitor eros consequat vitae. Mauris dolor nunc, ultrices eu leo sed, ornare lacinia quam. Pellentesque convallis massa at massa egestas, vestibulum vulputate dolor dignissim. Nullam sed metus a odio convallis molestie non a nisl. Donec eleifend lacus ut suscipit cursus. Cras viverra urna at arcu lacinia, in viverra neque pharetra. Suspendisse pellentesque tortor sit amet lacus elementum gravida et non risus. In cursus turpis vitae tortor molestie congue. Phasellus laoreet sit amet neque sit amet egestas. Aliquam sagittis ac massa vitae pulvinar. Vivamus bibendum odio sed enim porta pretium. Ut varius lacinia elit ut interdum. In in pretium metus.</p>
            </div>
        </li>
        <li>
            <h2>Lorem Ipsum</h2>
            <div>
                <img src="http://placehold.it/80x80" alt="" />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper dui sit amet erat faucibus egestas. Vivamus eget commodo ante.</p>
            </div>
        </li>
        <li>
            <h2>Lorem Ipsum</h2>
            <div>
                <img src="http://placehold.it/80x80" alt="" />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper dui sit amet erat faucibus egestas. Vivamus eget commodo ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ac magna metus. Donec eget auctor lorem. Cras vehicula nulla quis facilisis ultrices. Duis bibendum tellus ut porta suscipit. Pellentesque vitae orci a orci tincidunt posuere at et quam. Aliquam erat volutpat. Etiam dignissim egestas arcu non lacinia. Sed placerat sagittis enim eget bibendum. Suspendisse mollis consequat libero, ut porttitor eros consequat vitae.</p>
            </div>
        </li>
        <li>
            <h2>Caption</h2>
            <div>
                <img src="" alt="" />
                <p>Text</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

CSS:

/* @override 
    http://localhost/~simon/tests/ajax_search/mystyle.css */

body {
    background: #DAD7C7;
}

#searcharea {
    margin: 0 auto;
    text-align: center;
    background: #BF996B;
    padding: 10px;
    width: 30%;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}

#searcharea label {
    font: bold 1.3em Arial;
    text-transform: uppercase;
    padding-bottom:  5px;
    color: #A61C1C;
}

#searcharea p {
    margin: 0;
    line-height: 1em;
    padding-bottom: 5px;
}

#searcharea input {
    width: 80%;
    text-align: center;
}

#update {
    font-family: Georgia, "Times New Roman", Times, serif;
    width: 70%;
    margin: 0 auto;
    border-top: 1px dotted #CCC;
}

#update ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#update ul li {
    width: 100%;
    padding: 0 20px 20px;
    background: #EEE;
    height: 110px;
    overflow: hidden;
    border-bottom: 1px dotted #CCC;

    -webkit-animation: myanim 1s;
    -moz-animation: myanim 1s;
    -o-animation: myanim 1s;
    animation: myanim 1s;

    -webkit-transition: height 0.3s ease-out;
    -moz-transition: height 0.3s ease-out;
    -o-transition: height 0.3s ease-out;
    transition: height 0.3s ease-out;

}

#update li:hover {
    background: #FFFCE5;
    height: auto;
}

#update ul li div {
    margin: 0;
    padding: 0;
}

#update ul li div p {
    margin: 0;
}

#update h2 {
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    padding-bottom: 5px;
    padding-top: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: #BF5841;
    border-bottom: 1px dotted #CCC;
    margin-bottom: 10px;
}

#update img {
    float: left;
    width: 80px;
    margin-right: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

@-webkit-keyframes myanim {
    0% { opacity: 0.3; }
    100% { opacity: 1.0; }
}

@-moz-keyframes myanim {
    0% { opacity: 0.3; }
    100% { opacity: 1.0; }
}

@-o-keyframes myanim {
    0% { opacity: 0.3; }
    100% { opacity: 1.0; }
}

@keyframes myanim {
    0% { opacity: 0.3; }
    100% { opacity: 1.0; }
}
Was it helpful?

Solution

Thanks for the hint, seems that it isn't possible without using JavaScript:

Set CSS to these values

#update ul li {
    height: 110px;
    /* ... */
}

#update li:hover {
    background: #FFFCE5;
}

Principle of JavaScript code:

// Mouse-enter Event
curHeight = $(this).height();
autoHeight = $(this).css('height', 'auto').height();

$(this).height(curHeight).animate({height: autoHeight}, 1000);

// Mouse-leave Event
// same, but vice versa

You can grab the full code here: http://jsfiddle.net/9eaAq/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top