Анимированные элементы не могут быть нажаты на

Question

Мне просто интересно, есть ли что-нибудь, что я могу сделать по этому поводу. У меня есть анимация рабочего эффекта («передача»), которая влияет на передачу CSS и элемент того, куда он идет. Я действительно хочу, чтобы элемент, где его можно было бы щелкнуть во время и после анимации. Сейчас он доступен только после анимации.

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

stimuli['sample'] Что это выглядит следующим образом:

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

я только в состоянии нажать на него после того, как анимация делается. Я хочу, чтобы иметь возможность нажимать на нее даже во время анимации. Что мы можем сделать?

Edit 1 Я попытался в том числе:

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

Это работает, но когда класс передачи перекрывается с изображением он перестает работать. Я также пробовал добавить:

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

но так как класс не создан до его запуска, он не работает. Я попытался разместить еще один div с тем же классом, но скрыл его с id, но все же я не могу нажать на этот класс.

Я пытаюсь сделать то, что другой пользователь сделал: 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 

, но этот класс UI-эффекты-передачи еще

Answer 1

Один из методов, который можно использовать для создания того, что находится за элементом clickable, заключается в использовании следующего CSS.

pointer-events: none; 

Это позволяет вам щелкнуть изображение, на котором происходит анимация передачи. Поскольку мы хотим щелкнуть на картинке, несмотря на то, что изображение переноса перекрывает нашу картинку, мы можем использовать простой css, показанный выше, в нашем классе переноса ui-effects.

Answer 2

в краткосрочной перспективе: если вы Клонирование объекты динамически, тогда вы можете активировать событие с динамически добавленными объектами, щелкнув что-то вроде

Обновление:

Я не копал ваш код. Но я думаю, что (возможно) ваш селектор не работает, потому что "transfer" эффект клонирования вашего объекта внутри, а затем делает эффект анимации ... Вы можете проверить, что, выполнив следующие простые изменения:

изменить эту строку:

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

в

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

Надеется, что это поможет. дайте мне знать, если нет, пожалуйста.

Update 2:

Несмотря на ваши комментарии, кажется .ui-effects-transfer оборачивает ваш объект и ваше событие щелчка не вызывая. Поэтому, пожалуйста, попробуйте следующее:

например, если ваш объект находится внутри таблицы с id = 'table1'.что-то вроде:

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

затем изменить

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

в

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

если он исправил проблему. то посмотрите на http://api.jquery.com/on/

, пожалуйста, обновите меня.