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

回答

相關問題