0

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

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>

我有一些简单的 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{float:left;} .circle > p{vertical-align:middle;margin:auto;text-align:center;}

还有我正在试验的 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
            });
        });
4

2 回答 2

0

它还不是防弹的（如果你再次鼠标移出，它会吓坏）但你可能会寻找这样的东西：

$(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。这样，宽松会顺畅很多。你可以在这里找到所有的 easingtypes

于 2013-10-29T14:17:43.183 回答
0

您不必区分$this.height()和circleWidth因为在您的函数中，它们是相同的元素。

看看这个小提琴。我敢打赌，您可以进一步优化代码，这只是为了使其正常工作而不会引发错误的修改。

$(".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-29T14:12:38.613 回答