Clever Geek Handbook

Pulsing effect at the DIV border

I am trying to achieve a ripple effect for the border. Doesn't seem to work. How to make a pulse effect for a border?

CSS

.DivBorder{
    border: 2px;
    border-color: #000;
 }

JQ:

function pulseEff(){ 
   $('.DivBorder').delay(1000)
      .animate({ 'border-color': 'Transparent'}, 100)
      .delay(1000)
      .animate( {'border-color': '#333'
      }, 100);
};
+3


source to share


1 answer


Solution without setInterval()

, it continues to work and cannot be easily stopped.

Fiddle

(function pulseEff() {
    $('.DivBorder').delay(1000).animate({
        'border-color': 'transparent'
    }, 100).delay(1000).animate({
        'border-color': '#333'
    }, 100, pulseEff);
})();

You can use simple fadeIn/Out

together with spacing.

fadein / out Fiddle



function pulseEff(){ 
   $('.ImgBorder').fadeOut(300).fadeIn(300);
};
var Interval;
$('#start').click(function(){
    Interval = setInterval(pulseEff,600);
});

or with your code; you need to increase the animation time from 100

to a more meaningful one, as a 100

millisecond is too short to work out.

animated script

function pulseEff() {
    $('.DivBorder').delay(1000)
        .animate({
        'border-color': 'transparent'
    }, 600).delay(1000)
        .animate({
        'border-color': '#333'
    }, 600);
};
var Interval;
$('#start').click(function () {
    Interval = setInterval(pulseEff, 600);
});
+3


source






More articles:


All Articles