边框淡入淡出/缩放点击？

我遇到我试图使用CSS/JavaScript的复制效果，虽然我挣扎有点...边框淡入淡出/缩放点击？

关注http://www.youtube.com/watch?v=sXqXpwyBI1k并在影片中，你会发现，当主持人印刷机任何一个按钮，一个白色框都会放大并淡入视野，然后迅速淡出。

这是非常微妙，但非常有效。

任何人都知道这种类型的效果的名称，甚至有一些链接到一些代码复制它？

为了回应@Fabrizio，这是我写的代码。如您所见，当我调用动画时，“阴影”按钮从0,0宽度/高度开始并展开到目标宽度/高度。

另一个奇怪的事情是，我不能在宽度/高度上使用+ =或 - = ...我认为它增加/减少了“当前”值，而不是从0重置并重新开始...

<!doctype html> 
<html lang="en"> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script> 
     $(function() { 
     $('.button').click(function() { 
      var shadow = $('<button class="button shadow">&nbsp;</button>'); 
      shadow.css({ 
      width : $(this).outerWidth() + 2, 
      height : $(this).outerHeight() + 2, 
      marginLeft : '-1px', 
      marginTop : '-1px', 
      opacity : 0 
      }); 

      $(this).before(shadow); 
      shadow.animate({ 
      opacity : 0.5, 
      marginLeft : '-=2', 
      marginTop : '-=2', 
      width : $(this).outerWidth() + 6, 
      height : $(this).outerHeight() + 6 
      }, 200); 
     }); 
     }); 
    </script> 
    <style> 
     * { margin: 0; padding: 0; } 
     body { padding: 50px; background: #333; } 
     .button { padding: 15px 25px; border: 0; cursor: pointer; font-weight: bold; } 
     .button.red { background: #FF0000; color: #FFFFFF; } 
     .button.shadow { background: transparent; display: block; position: absolute; border: solid 1px #FFFFFF; } 
    </style> 
    </head> 
    <body> 
    <button class="button red">Test</button> 
    </body> 
</html>

来源

2012-03-02 Gavin

有你看着jQuery的？你可以动态生成一个div，位置绝对的，给予点击的对象的坐标，然后用动画制作它可见，然后消失。我从来没有这样做过，但我不认为在jQuery的帮助下变得非常困难 – Fabrizio 2012-03-02 20:15:51

我有，不幸的是我的笔记本电脑有点不舒服，当我准备做某事时，它在某些测试中关闭。当使用动画功能来改变宽度，高度和边距时，而不是“缩放”，它将“shadow”元素的大小从0改为宽度/高度，而不是像应该那样递增。我会张贴一个样本。 ;） – Gavin 2012-03-02 20:36:43

这是我在几分钟内拧干的东西。

可以与边框或颜色玩，请参阅jQuery的动画文件有关动画（例如，除非你使用一个插件，你不能动画边框颜色的详细信息，也没有一个有弹性的效果

$('.style_logo_position_extra_logo').mouseover(function(){ 
    $('<div/>') 
     .width($(this).outerWidth()) 
     .height($(this).outerHeight()) 
     .offset($(this).offset()) 
     .css({ 
      'border-width':'2px', 
      'border-style':'double', 
      'border-color':$(this).css('border-color'), 
      'position':'absolute', 
      'borderTopLeftRadius': $(this).css('borderTopLeftRadius'), 
      'borderTopRightRadius': $(this).css('borderTopRightRadius'), 
      'borderBottomLeftRadius': $(this).css('borderBottomLeftRadius'), 
      'borderBottomRightRadius': $(this).css('borderBottomRightRadius'), 
      'WebkitBorderTopLeftRadius': $(this).css('WebkitBorderTopLeftRadius'), 
      'WebkitBorderTopRightRadius': $(this).css('WebkitBorderTopRightRadius'), 
      'WebkitBorderBottomLeftRadius': $(this).css('WebkitBorderBottomLeftRadius'), 
      'WebkitBorderBottomRightRadius': $(this).css('WebkitBorderBottomRightRadius'), 
      'MozBorderRadius': $(this).css('MozBorderRadius') 
     }) 
     .appendTo('body') 
     .animate({ 
       'border-width':'6px', 
       'opacity':0.25, 
       'width':'+=6', //use even numbers if possible 
       'height':'+=6', 
       'left':'-=8', //-((+width/2) + (delta border) +1) = -((+6/2) + (6-2)+1) =-8 
       'top':'-=8', 
       'borderTopLeftRadius': '+=6', 
       'borderTopRightRadius': '+=6', 
       'borderBottomLeftRadius': '+=6', 
       'borderBottomRightRadius': '+=6', 
       'WebkitBorderTopLeftRadius': '+=6', 
       'WebkitBorderTopRightRadius': '+=6', 
       'WebkitBorderBottomLeftRadius': '+=6', 
       'WebkitBorderBottomRightRadius': '+=6', 
       'MozBorderRadius': '+=6' 
       },500, 'linear',function(){ 
        $(this).remove(); 
       }) 
     ; 
})

我其实要使用我的网站上这样一个

来源

2012-03-02 21:19:57 Fabrizio

看起来不错。我只是有一个小提琴。我希望视频的作者能够分享他的秘密。如果是这样，我也会在这里发布它。 – Gavin 2012-03-03 16:45:20

我接受了法布里齐奥的回应，简化了一下，并且玩弄了一下小提琴：http://jsfiddle.net/bengundersen/T7u54/ – bgun 2012-03-05 05:08:21

边框淡入淡出/缩放点击？

回答

相关问题