0

垂直アコーディオンギャラリーを作成するために、100％からフルサイズのdivを作成しました。それは実際に機能します、唯一の問題は、サイズ変更のアニメーションが奇妙であるということです、それはあなたがそこに見ることができるようにサイズ変更中に私の写真を平らにします：http: //hine.be/test

どうすれば修正できるか考えていますか？これが私のコードです：

<!DOCTYPE html>
<head>  
<style>
input{display:none}
.ani
{
width:100%;
height:100px;
background:url(paonad.jpg) center no-repeat;
background-size: 100% auto;
transition:all 2s;
-moz-transition:all 2s; /* Firefox 4 */
-webkit-transition:all 2s; /* Safari and Chrome */
-o-transition:all 2s; /* Opera */
display:block;
}
input:checked + .ani
{
height:400px;
background-size: 4000px 400px;
}

.ani2
{
width:100%;
height:100px;
background:url(spacingad.jpg) center no-repeat;
background-size: 100% auto;
transition:all 2s;
-moz-transition:all 2s; /* Firefox 4 */
-webkit-transition:all 2s; /* Safari and Chrome */
-o-transition:all 2s; /* Opera */
display:block;
}
input:checked + .ani2
{
height:400px;
background-size: 4000px 400px;
}
</style>
</head>
<body>
<input type="checkbox" id="paon">
<label class="ani" for="paon"></label>
<input type="checkbox" id="space">
<label class="ani2" for="space"></label>
</body>
</html>

編集： http： //jsfiddle.net/ht5F8/

Lowkaseに感謝します！

4

1 に答える 1

1

最後に折木を見つけた：

http://jsfiddle.net/rzB3E/

.ani クラスでは、次のように最小の高さを指定する必要があります。

background-size: 100% 100px;

これの代わりに：

background-size: 100% auto;

私はまた、おそらくよりエレガントなソリューションに出くわしました:

http://jsfiddle.net/XcFxQ/104/

<div class="my_img"></div>

.my_img{
    width:100%;
    height:100px;
    background:url(http://www.deshow.net/d/file/animal/2009-07/cute-kitten-631-4.jpg) center no-repeat;
    background-size: 100% 100px;
    transition:all 2s;
    -moz-transition:all 2s; /* Firefox 4 */
    -webkit-transition:all 2s; /* Safari and Chrome */
    -o-transition:all 2s; /* Opera */
    display:block;    
}

.my_img_large{
   height:400px;
   background-size: 4000px 400px;    
}

$('.my_img').click(function(){
    if ($(this).hasClass('my_img_large')) {
        $(this).removeClass('my_img_large');
    } else {
        $(this).addClass('my_img_large');
    }
});
于 2013-03-12T19:26:49.320 に答える