Question

我的网页上有一个div。在div的悬停时我希望它同时升级和淡出。我正在使用CSS和Jquery。这是我的小提琴 - ＆gt; 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/

提升和淡出效果

1 个答案: