0

How to make the all wrap after click left to right decrease the size become not visible? now I use width 0 for div and img but can't find the way make same effect on text, also if use opacity it will flash after finish

$('.wrap').click(function(){
    $(this).find('img').animate({
        width: '0'
    });
    $(this).find('.back').animate({
    width: '0'
    });

    $(this).find('.text').animate({
    opacity: '0'
    });
});

<div class="wrap">
    <div class="text"><div class="title">背後的故事&lt;/div></div>
    <div class="back"><img src="../public/imgs/2/back.png"></div>
</div>



.text{
    widht: 95px;
    height: 760px;
    position: absolute;
    .title{ 
        position: absolute;
        -webkit-writing-mode: vertical-lr;
        text-align: center;
        line-height: 95px;
        z-index: 1;
        font-size: 17px;
    }
}


.back{
    position: absolute;
    width: 97px;
    height: 760px;
    img{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 90px;
        height: 600px;
        margin-left:-45px;
        margin-top: -300px;
    }
}
4

1 回答 1

3

您可以为属性设置动画font-size以更改文本的大小。您还应该为.title元素而不是.text元素设置动画，因为您已经.title在 CSS 中指定了字体大小。

$('.wrap').click(function(){
    $(this).find('img').animate({
        width: '0'
    });
    $(this).find('.back').animate({
        width: '0'
    });
    $(this).find('.text .title').animate({ // Select the .title element here.
        'font-size': '0' // Animate font-size here. Make sure you use quotes.
    });
});

（请务必使用 'font-size' 周围的引号使其成为正确的 JavaScript 对象。）

于 2013-06-17T04:14:27.760 回答