Why is this jquery transfer not woking

Question

I'm a little confused why this effect transfer is not working in jquery.

my jquery files

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

My HTML.

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

My CSS for the transfer:

.ui-effects-transfer {
border: 5px solid black;
  }

And my jquery script

<script>


$("#sample").effect("transfer", {to: $("#hello")}, 1000);

</script>

Any ideas?

Answer 1

You're running the code before the DOM is finished loading. Try this:

$(document).ready(function () {
    $("#sample").effect("transfer", { to: $("#hello") }, 1000);
});