Масштабирование округленных изображений с использованием CSS3 и animate () - PullRequest
Новая
       19

Масштабирование округленных изображений с использованием CSS3 и animate ()

0 голосов
/ 28 сентября 2011

Я пытаюсь создать функцию масштабирования для определенных изображений при наведении на них, сохраняя при этом эффект округления изображения с помощью CSS3.См. Код ниже: 

  $(".nodes a").hover(function() {
    if (!$(this).hasClass('inactive')) {
      $(this).css({'z-index' : '99'});
      $(this).find('span').addClass('active');
      $(this).find('span').addClass("hover").stop().animate({ marginTop: '-24px', marginLeft: '-24px', top: '50%', left: '50%', width: '80px', height: '80px', WebkitBorderTopLeftRadius: 40, WebkitBorderTopRightRadius: 40, WebkitBorderBottomLeftRadius: 40, WebkitBorderBottomRightRadius: 40, MozBorderRadius: 40, BorderRadius: 40 }, 250); }
  }, function() {
    if (!$(this).hasClass('inactive')) {
      $(this).css({'z-index' : '0'});
      $(this).find('span').removeClass('active');
      $(this).find('span').removeClass("hover").stop().animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '32px', height: '32px', WebkitBorderTopLeftRadius: 32, WebkitBorderTopRightRadius: 32, WebkitBorderBottomLeftRadius: 32, WebkitBorderBottomRightRadius: 32, MozBorderRadius: 32, BorderRadius: 32 }, 250); }
  });

HTML выглядит следующим образом - 

<ul class="nodes">
  <li>
    <a href="/">
      <span style="background: url(image.jpg) no-repeat center center; width: 32px; height: 32px;">
        <img src="image.jpg" style="opacity: 0;" />
      </span>
    </a>
  </li>
</ul>

То, что я не могу заставить работать, - это MozBorderRadius при анимации (он не имеет постоянного кругаWebkitRadius и BorderRadius, похоже, работают), а также сохраняют изображение в центре по мере его анимации.Я подумал, что нужно придать изображению MarginTop и marginLeft, равное половине ширины и размера, добавленных к нему при анимации, но оно просто выравнивается по низу.

1 Ответ

1 голос
/ 29 сентября 2011

Вам не нужно устанавливать все углы радиуса webkit, достаточно просто "WebkitBorderRadius".

А для анимации MozBorderRadius вы можете использовать ("border-radius": "40px"). Вот ваш код, работающий над webkit и moz: 

$(".nodes a").hover(function() {
    if (!$(this).hasClass('inactive')) {
        $(this).css({'z-index' : '99'});
        $(this).find('span').addClass('active');
        $(this).find('span').addClass("hover").stop().animate({ 
            marginTop: '-24px', 
            marginLeft: '-24px', 
            top: '50%', 
            left: '50%', 
            width: '80px', 
            height: '80px', 
            'border-radius' : '40px',
            WebkitBorderRadius: 40,
            BorderRadius: 40,
        }, 250);
    }
}, function() {
    if (!$(this).hasClass('inactive')) {
        $(this).css({'z-index' : '0'});
        $(this).find('span').removeClass('active');
        $(this).find('span').removeClass("hover").stop().animate({ 
            marginTop: '0', 
            marginLeft: '0', 
            top: '0', 
            left: '0', 
            width: '32px', 
            height: '32px', 
            'border-radius' : '32px',
            WebkitBorderRadius: 32,
            MozBorderRadius: 32, 
            BorderRadius: 32
        }, 250); 
    }
});
...