放大和淡出效果

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

JQUERY

$("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/