Jquery redimensionner l'image avec un effet de battement de coeur

Bonjour voulez faire une image avec un effet de pulsation.
Il a pour redimensionner un peu, disons maximum de 20 pixels plus gros, et puis s'en va pour taille d'origine.
Il sera comme un battement de coeur, 2 bat - original, 2 bat - original.

Jusqu'à présent je n'ai trouvé que cet effet:

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

Ou vous pouvez vérifier ici: JSFiddle

source d'informationauteur Valeri Crudu

  1. 11

    cela va faire

    (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);
  2. 5

    Je voudrais faire comme ceci simplement à l'aide de .animate

    DÉMO 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();
  3. 5

    Vous wan pas un vrai Cœur Battant effet?

    Alors qu'attendez-vous pour? vérifiez les points suivants 😉

    HTML

    <img id="seventyfive" 
     src="http://upload7.ir/imgs/2014-02/60314995125165880641.png"/>

    CSS

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

    JS

    var size = 150;
var s_size = 0.66 * size;
var m_size = 0.83 * size;
var s_resize = ( size - s_size )/2;
var m_resize = ( size - m_size )/2;
var image = $('#seventyfive').css('width',size);

var x = image.offset().left; 
var y = image.offset().top; 

function pulse() { 
    image.animate({ 
        width: s_size, top:x+s_resize,left:y+s_resize 
    }, 350, function() { 
        image.animate({ 
            width: size, top:x, left:y 
        }, 100, function() { 
            image.animate({ 
                width: m_size, top:x+m_resize, left:y+m_resize 
            }, 70 ,function(){ 
                image.animate({ 
                    width: size, top:x , left:y 
                }, 70, function() { 
                   pulse();  
                }); 
            });  
        }); 
    });  
}; 

pulse();

    Violon Démo ICI

  4. 2

    En CSS3:

    DÉMO

    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);
  5. 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;
}

    Violon Démo ICI

  6. 0

    Dans cette solution le nombre de battements est un paramètre (reps):

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