Question

看看这家伙的博客：

当你将鼠标悬停在帖子左侧的“无限”符号时，我非常喜欢动画效果 - 它会为帖子推出缩短的网址。我正在试图弄清楚如何适应/模仿这个（我希望将电子邮件符号作为图像，并在其悬停时推出我的电子邮件地址）。

我对jQuery相对较新（我假设这个效果已经完成）。知道我怎么能这样做吗？

Answer 1

这是一个简单的例子：

我默认应用了0宽度并在悬停width: auto或我的情况下应用300px：p Opacity，只需将默认样式添加到较低值并将悬停状态设置为max或更高，即可设置颜色：p Vice -versa也有效。

-webkit-transition: all .5s ease .05s;
-moz-transition: all .5s ease .05s;
-o-transition: all .5s ease .05s;
-ms-transition: all .5s ease .05s;
transition: all .5s ease .05s

玩得开心。

Answer 2

喜欢@AshentePaul说你可以用CSS3做到这一点...... 但如果你真的想用jQuery做一下，请查看jQuery.fn.animate函数..

DEMO

var $col = $("#collapse"),
    $example = $("#example");

$example.hover(
    function(){
        $example.stop().animate({opacity: 1}, 400, "linear");
        $col.stop().animate({ width: "200px" }, 400, "linear");
    },
    function(){
        $example.stop().animate({ opacity: 0.3 }, 400, "linear");        
        $col.stop().animate({ width: "0" }, 400, "linear");
    }
);

如何在jQuery中实现'rollout'效果

2 个答案: