Animated elements cannot be clicked on

Question

I was just wondering if there was anything that I can do about this. I have a working effect('transfer') animation which affect the transfer CSS and the element of where it's going. I really want the element of where its going to be clickable during and after the animation. Right now it is only clickable for after the animation.

$(document).on('ready', function() {
    @if ($stimuli['transfer'] == true)
        $("#sample").effect("transfer", {
            to: $("#{{ $stimuli['sample'][0] }}")
        }, 6500, function() {
            $('#{{ $stimuli['sample'][0] }}').append('<a href="response/{{$stimuli['sample'][0]}}"><div class="ui-effects-transfer"></div></a>');
            $('#{{ $stimuli['sample'][0]}}').css("border", "10px solid green");
            $('.ui-effects-transfer').effect("shake", 2000);
        });
});

What stimuli['sample'] is is the following:

<td id="{{$stimuli['comparison'][0]}}"> 
    <a href='response/{{ $stimuli['comparison'][0]}}'>
        <img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][0]) }}.jpg' />
    </a>
</td>

I am only able to click on it after the animation is done. I want to be able to click on it even during the animation. What can we do?

Edit 1 I have tried including:

$("#{{ $stimuli['sample'][0] }}").click(function(){
    window.location.href = "response/{{$stimuli['sample']}}";
});

This works but when the transfer class overlaps with the picture it stops working. I also tried adding this:

    $(".ui-effects-transfer").click(function(){
    window.location.href = "response/{{$stimuli['sample'][0]}}";
});   

but since the class is not created before it starts it doesn't work. I've tried placing another div with the same class but hiding it with id, but still I can't click on that class.

I am trying to do what another user has done: EDIT

$(document).on('ready', function() {



@if ($stimuli['transfer'] == true)
 $("#{{ $stimuli['sample'][0] }}").click(function(){
    window.location.href = "response/{{$stimuli['sample'][0]}}";
});   



$("#sample").effect("transfer", {to: $("#{{ $stimuli['sample'][0] }}")}, 6500, function () {

   $('#{{ $stimuli['sample'][0] }}').append('<a href="response/{{$stimuli['sample'][0]}}"><div class="ui-effects-transfer"></div></a>');

           $('#{{ $stimuli['sample'][0]}}').css("border", "10px solid green");

           $('#extraTransfer').hide();





}).on('click', function(){
        window.location.href = "response/{{$stimuli['sample'][0]}}";


});

    });
@endif

but that class ui-effects-transfer still

Answer 1

One method that can be used to make what is behind the element clickable is to use the following CSS.

  pointer-events: none;

This allows that you can click the picture that the transfer animation is going onto. Since we want to click on the picture despite the fact that the transfer picture is overlapping our picture we can use the simple css shown above in our ui-effects-transfer class.