граница исчезает / масштабируется при нажатии? - PullRequest
Новая
       7

граница исчезает / масштабируется при нажатии?

0 голосов
/ 03 марта 2012

Я столкнулся с эффектом, который я пытаюсь воспроизвести, используя css / javascript, хотя немного борюсь ...

Смотрите http://www.youtube.com/watch?v=sXqXpwyBI1k и во время фильма выВы заметите, что, когда докладчик нажимает на любую из кнопок, белая рамка увеличивается и исчезает, а затем быстро исчезает.

Это очень тонко, но очень эффективно.

Кто-нибудь знает оназвание этого типа эффекта или даже есть ссылка на какой-то код, который его копирует?

В ответ на @Fabrizio, это код, который я написал.Как вы можете видеть, когда я вызываю анимацию, кнопка «тень» начинается с 0,0 ширины / высоты и расширяется до целевой ширины / высоты.

Еще одна странная вещь - я не могу использовать += или - = на ширину / высоту ... Я думал, что он увеличил / уменьшил значение "current", не сбросил с 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>

1 Ответ

1 голос
/ 03 марта 2012

Это то, что я смог написать за несколько минут.

Вы можете поиграть с рамкой или цветом, пожалуйста, обратитесь к документации jQuery для получения дополнительной информации о animate (например, вы не можетеанимируйте цвет границы, если вы не используете плагин и не имеете оживленного эффекта 

$('.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();
                })
        ;
})

Я собираюсь использовать его на своем сайте

...