0

言語：Javascript | jQuery | PHP | HTML5

私が求めているのは、この質問に似ています。

最初のページの読み込み時に、（左上からではなく）中央から「バブル」（丸いもの）を成長させる必要があります。

私はこれまでのところのデモである負のマージンを使用してこれを達成することができます。

以下のコード：

$(document).ready(function(){   
$('.bubble').animate({
opacity: 1,
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
margin: '-25%'
  }, 800, function() {

しかし、私はこれを「ホバー」効果と一緒に使用しています。これは、（ホバー時に）泡を中央から10％まで拡大する必要があります。JSはここで見つかりました。

これで、最初のページ読み込みからの負のマージンが-25％に設定されます。これは、それが中央に配置される唯一の方法であるためですが、ホバー効果は、最初に読み込まれた-25％のマージンと一致しないdivのCSSからのマージンを使用します。 。

私が達成しようとしているのは、まさにこのページでどのように行われるかです：https ://www.vizify.com/rand-fishkin

  • バブルは最初にページの読み込み時に読み込まれます（中央から拡大）
  • 泡はホバーすると成長します（中心から現在のサイズの10％拡大します）

私は今無知です、どうすればこれを機能させることができますか？どんな助けでも大歓迎です！

4

1 に答える 1

0

コードの2番目のスニペットをコールバックとして（バブルがロードされた後）中に配置することで、答えを見つけました。

$(document).ready(function(){

// LOAD BUBBLES

    $('.bubble').animate({
    opacity: 1,
    width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    margin: '-25%'
  }, 400, function() {


// NOW, LOAD HOVER EFFECTS

        $(".bubble").on('scale', function(e, s) {
            var data = $.data(this, 'size'),
                w = data.width,
                h = data.height;
            $(this).stop().animate({
                width: w * s,
                height: h * s,
                marginLeft: data.marginLeft - w * (s-1) / 2,
                marginTop: data.marginTop - h * (s-1) / 2
            });
        }).each(function() {
            var $this = $(this);
            $.data(this, 'size', {
                width: $this.width(),
                height: $this.height(),
                marginLeft: parseInt($this.css('margin-left')),
                marginTop: parseInt($this.css('margin-top'))
            });
        }).hover(function() {
            $(this).trigger('scale', [1.2])
        }, function() {
            $(this).trigger('scale', [1.0])

        });


    });
});
于 2012-11-06T04:10:59.883 に答える