jquery - 放大和淡出效果

Question

我的网页中有一个特定的 div。在 div 悬停时，我希望它同时放大和淡出。我正在使用 CSS 和 Jquery。这是我的小提琴-> http://jsfiddle.net/tDATq/

目前效果是文本放大然后淡出。我同时想要。div 中的文本在放大时也会丢失它的位置。请帮忙

这是代码HTML

<div id="tweets" class='fade'>
        Hello World
    <div> 

CSS

#tweets{
    width:250px;
    margin:auto;
    margin-top:30px;
    background-color:#fff;
    color:#00eaff;
}
#tweets:hover{
    -webkit-transform: scale(2.0);
          transform: scale(2.0);
}

查询

$("div.fade").hover(
 function(){$(this).fadeOut(1900);
            }

);

Answer 1

你不需要jquery，这里是css解决方案

#tweets{
    width:250px;
    margin:auto;
    margin-top:30px;
    background-color:#fff;
    color:#00eaff;
    -webkit-transition: all 2s; /* transition */
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}
#tweets:hover{
    -webkit-transform: scale(2.0);
          transform: scale(2.0);
    opacity:0;         /* fadeout */
}

小提琴：

http://jsfiddle.net/tDATq/1/

更新：

这个小提琴文本停留在中间

http://jsfiddle.net/tDATq/2/