Question

我是j Query的新手，我有这个网站，我不久前用flash建立了。现在我想用j Query做同样的效果。请参阅以下网址的效果。

http://theark.co.ke/

我已经尝试了一些东西看到下面的代码，但有些东西是不对的，它不顺畅，每次我盘旋在任何一个圈子上我都会在firebug的控制台上出错。请建议伙伴，谢谢

 <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>

我有一些简单的CSS用于演示目的

.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 {浮动：左;} .circle＆gt; p {垂直对齐：中部;余量：汽车;文本对齐：中心;}

我正在尝试的jquery

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

Answer 1

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

Answer 2

它还没有防弹（如果你再次鼠标移除，它会发疯）但你可能会寻找这样的东西：

$(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

Jquery on Hover Bounc and Ease

2 个答案: