Jquery on Hover Bounc and Ease

我是一个新手j查询和我有这个网站，我与前一段时间建立了闪存。现在我想用j Query来做出同样的效果。请在下面的URL中查看效果。Jquery on Hover Bounc and Ease

http://theark.co.ke/

我尝试过的一些事情看下面的代码，但东西是不正确的，不光滑，每一次我悬停在任何圆的时候，我得到萤火虫的控制台上的错误。请指点队友，感谢

<div class="circle floatleft" id="circle1"><p>Circle One</p></div> 
<div class="circle floatleft" id="circle2"><p>Circle two</p></div> 
<div class="circle floatleft" id="circle3"><p>Circle three</p></div> 
<div class="circle floatleft" id="circle4"><p>Circle four</p></div>

我对演示目的

.circle{border-radius: 50%;border: 5px solid #FFBD00;background:#4679BD;color:#fff;text-align:center;margin:auto;vertical-align:middle;padding:20px;min-width:100px;min-height:100px;}

.floatleft一些简单的CSS {浮动：左;} .circle> p {垂直对齐：中间;保证金：汽车;文本对齐：中心;}

的，我是用

$(".circle").hover(function() { 
     //resize other circles 
     var circleHeight = $(".circle").height(); 
     var circleWidth = $(".circle").width(); 
     $(".circle").animate({'opacity' : '0.5', 'height' : circleHeight/4, 'width' : circleWidth/4}); 
     var $this = $(this); 
     $this.animate({ 
       'height': $this.height() * 1.2, 
       'width' : $this.width() * 1.2, 
       'opacity' : '1' 
      }); 
     },function() { 
       $(".circle").animate({'opacity' : '1', 'height' : circleHeight * 4, 'width' : circleWidth * 4}); 
       var $this = $(this); 
       $this.animate({ 
       'height': $this.height()/1.2, 
       'width' : $this.width()/1.2 
      }); 
     });

来源

2013-10-29 Joe Ng' ethe

尝试了jQuery您不必在$this.height()和circleWidth之间有所不同，因为在您的功能中，它们是相同的元素。

看看这个fiddle。我敢打赌你可以进一步优化代码，这只是一个修改而不会导致错误。

$(".circle").hover(function() { 
    //resize other circles 
    var element = $(this); 
    var circleHeight = element.height(); 
    var circleWidth = element.width(); 
    element.animate({'opacity' : '0.5', 'height' : circleHeight/4, 'width' : circleWidth/4}); 
    element.animate({ 
     'height': circleHeight * 1.2, 
     'width' : circleWidth * 1.2, 
     'opacity' : '1' 
    }); 
},function(circleHeight, circleWidth) { 
    var element = $(this); 
    element.animate({'opacity' : '1', 'height' : circleHeight * 4, 'width' : circleWidth * 4}); 
    element.animate({ 
     'height': circleHeight/1.2, 
     'width' : circleWidth/1.2 
    }); 
});

来源

2013-10-29 14:12:38 Sam

它不是防弹的，但（如果你的鼠标，并再次，它会吓坏了），但你可以寻找这样的事情：

$(document).ready(function() { 
    var originalHeight, originalWidth; 

    $(".circle").css('opacity','0.5'); 
    $(".circle").hover(function() { 
     var object = $(this); 
     originalHeight = object.height(); 
     originalWidth = object.width(); 

     $(this).stop().animate({ 'opacity': '1', 'height': originalHeight * 4, 'width': originalWidth * 4 }, 
     { duration: 1200, easing: 'easeOutElastic' }); 
    }, function() { 
     $(this).stop().animate({ 'opacity': '0.5', 'height': originalHeight, 'width': originalWidth }, 
     { duration: 1200, easing: 'easeOutElastic' }); 
    }); 
});

不要忘了包括jquery.easing.min.js 。这样宽松将会更顺畅。你可以找到all of the easingtypes here

来源

2013-10-29 14:17:43

Jquery on Hover Bounc and Ease

回答

相关问题