10

こんにちは、ハートビート効果のある画像を作りたいです。少しサイズを変更する必要があります。たとえば、最大 20 ピクセル大きくしてから、元のサイズに戻します。ハートビート、2ビート-オリジナル、2ビート-オリジナルのようなものになります。

これまでのところ、この効果しか見つかりませんでした：

    (function pulse(back) {
    $('#seventyfive').animate(
        {
            'font-size': (back) ? '100px' : '140px',
            opacity: (back) ? 1 : 0.5
        }, 700, function(){pulse(!back)});
})(false);

または、ここで確認できます: JSFiddle

4

6 に答える 6

11

これで十分です

(function pulse(back) {
$('#seventyfive img').animate(
    {
        width: (back) ? $('#seventyfive img').width() + 20 : $('#seventyfive img').width() - 20            
    }, 700);
$('#seventyfive').animate(
    {          
        'font-size': (back) ? '100px' : '140px',
        opacity: (back) ? 1 : 0.5
    }, 700, function(){pulse(!back)});
})(false);
于 2013-09-13T08:35:14.533 に答える
6

私は単にこのようにします.animate

デモhttp://jsfiddle.net/kevinPHPkevin/D3X7R/72/

function pulse() {
    $('#seventyfive').animate({
        width: 300, height: 300, // sets the base height and width
        opacity: 0.5
    }, 700, function() {
        $('#seventyfive').animate({
            width: 320, height: 320, // sets the alternative height and width
            opacity: 1
        }, 700, function() {
            pulse();
        });
    }); 
};

pulse();
于 2013-09-13T08:39:13.357 に答える
2

HTML

<div><img id="seventyfive" src="http://winters.yorku.ca/wp-content/blogs.dir/271/files/2011/11/twitter-icon.png" /></div>

JS

(function pulse(back) {
    $('#seventyfive').animate(
        {
            'font-size': (back) ? '100px' : '140px',
            opacity: (back) ? 1 : 0.5,
            height: (back) ? "100%" : "50%",
            width: (back) ? "100%" : "50%",
            'margin-top': (back) ? "0" : "25%",
            'margin-left': (back) ? "0" : "25%"
        }, 700, function(){pulse(!back)});
})(false);

CSS

#seventyfive{
    position:absolute;
    font-size:100px;
    font-weight:bold;
}

フィドルのデモはこちら

于 2013-09-13T08:41:27.420 に答える
2

CSS3 では:

デモ

var timeoutThrottle,back = true;
$('#seventyfive').on('transitionend',function(e){
    clearTimeout(timeoutThrottle);
    timeoutThrottle = setTimeout(function(){ back = !back; pulse(back); },0);
});
var pulse = (function pulse(back) {
    $('#seventyfive').toggleClass('heartBeat', back);
    return pulse;
})(back);
于 2013-09-13T08:51:50.837 に答える
0

このソリューションでは、拍数がパラメーター (担当者) です。

 function pulse($cnt,time,reps){
    reps = reps || 2;
    (function beat(count) {
         $cnt.animate({
            opacity: (count<=0) ? 1 : 0.5
            'font-size': (count<=0) ? '100px' : '140px',
         }, time,
         count==0? undefined :
                   function(){ beat(count<0? -count-1 : -count+1); });
    })(reps+1);
 }
于 2014-11-12T18:34:37.427 に答える