带有过渡的鼠标悬停的手风琴效果不稳定

时间：2013-09-19 21:43:34

标签： html css accordion transitions

对于一个小项目，我需要这个小网站，通过AJAX从服务器提取数据并输出它，如图所示。但问题不是JavaScript，而是纯HTML + CSS ..

enter image description here

您可以点击此处通过jsfiddle查看此页面，或者您可以查看此帖子末尾引用的引用代码：http://jsfiddle.net/RdJUM/

使用以下html代码段构建列表：

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

它是通过CSS格式化的，但重要的部分是：

#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;
}

只要您将过渡注释掉，这样就可以正常工作。您将鼠标悬停在文章上，它会将高度缩放为“自动”，这样可以准确显示内容的高度，仅此而已。但是，如果您取消对转换的注释，WebKit（Chrome 30，Safari 6）会产生一种完全无法使用的非常不稳定的效果。为方便起见，这是指向未注释版本的jsfiddle链接：http://jsfiddle.net/bQZ7F/

在Firefox 23和Opera 12中，此转换已停用，因此它的行为就像CSS部分不存在一样。

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; }
}

1 个答案:

答案 0 :(得分：0)

感谢提示，似乎不使用JavaScript是不可能的：

将CSS设置为这些值

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

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

JavaScript代码原理：

// 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

您可以在此处获取完整代码：http://jsfiddle.net/9eaAq/

相关问题
最新问题