0

私はj Queryの初心者で、フラッシュを使用して以前に構築したこのWebサイトを持っています。今、私は同じ効果を作りたいと思っていますが、j Queryを使用しています。効果は下記URLでご覧ください。

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を含めることを忘れないでください。これにより、イージングがよりスムーズになります。ここですべてのイージングタイプを見つけることができます

于 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 に答える