邊框淡入淡出/縮放點擊？

我遇到我試圖使用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

邊框淡入淡出/縮放點擊？

回答

相關問題