I have written some code which produces simple animations based on cycling through a

Question

0

Asked: May 29, 20262026-05-29T11:05:49+00:00 2026-05-29T11:05:49+00:00

I have written some code which produces simple animations based on cycling through a

0

I have written some code which produces simple animations based on cycling through a load of images, showing one image at a time with the rest hidden. Each frame is shown for 50 milliseconds.

The HTML of the animated element is like this:

<a href="/" id="owl">
  <img class="owl frame active-frame" style="" src="http://example.com/image1">
  <img class="owl frame" style=" display:none;" src="http://thereisspacehere.org/wp-content/themes/twentyeleven/images/animation/owl/2.jpg">
  <img class="owl frame" style=" display:none;" src="http://example.com/image2">
  <img class="owl frame" style=" display:none;" src="http://example.com/image3">
</a>

The CSS looks like this:

#owl {
  position:absolute;
  top:15px;
  left:13px;
  width:154px;
  height:170px;
}
.owl {
  position:absolute;
  top:0;
  left:0;
  width:154px;
  height:170px;
}

The #owl element is positioned absolutely within a relatively positioned div.

The #owl element is a link to ‘/’, but clicking on the animation does nothing. This code:

$('#owl').click(function(){
  console.log('Clicked');
});

Never gets executed when you click on it. Likewise, attaching an onclick event directly to the html of the element doesn’t restore the clickability.

If I make the <a> element bigger than the animated frames inside it, the portion that extends beyond the animation does retain its click event, and the code above runs, and the link is followed.

Why have I lost my click event? How can I get it back, or how can I work around the problem?

Thanks a lot.

Edit – here’s the code that creates the animation. Apologies for length!

Animation = {
    direction: 1,
    iterations: 0,
    maxIterations: 30,
    intervalId: false,
    element: '',
    active: false,
    cycle: function(element, iterations){
        this.element = element;
        $(element).addClass('animation');
        this.maxIterations = iterations;
        if (!this.active){
            this.intervalId = setInterval(function(){ Animation.changeFrame(Animation.element);},50);
            this.active = true;
        }
    },
    changeFrame: function(element){
        if (this.iterations > this.maxIterations){
            this.stop();
            this.revertToStart(element);
            this.active = false;
            this.iterations = 0;
        }
        var el = $(element);
        currentFrame = el.children('.active-frame');
        if (this.direction === 1){
            nextFrame = currentFrame.next('.frame');
        }else{
            nextFrame = currentFrame.prev('.frame');
        }
        if (nextFrame.length == 0){
            this.direction = this.direction ? 0 : 1;
            if (this.direction === 1){
                nextFrame = currentFrame.next('.frame');
            }else{
                nextFrame = currentFrame.prev('.frame');
            }
        }
        currentFrame.hide().removeClass('active-frame');
        nextFrame.show().addClass('active-frame');
        this.iterations++;
    },
    stop: function(){
        clearInterval(this.intervalId);
    },
    revertToStart: function(element){
        $(element).children('.frame').removeClass('active-frame');
        $(element).children('.frame').hide();
        $(element).children('.frame:first').show().addClass('active-frame');
    }
};
$(function(){
    $('#owl .frame:first').addClass('active-frame');
    $('#owl').mouseover(function(){
        Animation.cycle('#owl', 29);
    });
    $('#owl').click(function(){
        console.log('hey');
    })
});