到目前为止，我已经了解到所有效果和动画都排队等候。但是，如果你有多个效果，有些是队列，有些则不是。
我试图让两个#sample效果同时发挥作用。
但我希望ui-effects-transfer能够正常运行，但只有在其他动画运行之后才能运行。我已经尝试过代码中显示的方式。我试过没有队列，我尝试了简单的效果（“摇动”，“慢”）。
问题是：震动效果实际上不起作用，但是我编码了。从不出现。它只在我排队时才有效：false
ui-effects-transfer（摇动）动画永远不会发生。
$("#sample").effect("highlight", {duration: 6000, queue: false});
$("#sample").effect("transfer", {to: $("#{{ $stimuli['sample'][0] }}")}, 7000, function () {
$('#{{ $stimuli['sample'][0] }}').append('<a href="response/{{$stimuli['sample'][0]}}"><div class="ui-effects-transfer"></div></a>');
});
$(".ui-effects-transfer").effect("shake", {queue: true}, "slow");
HTML
<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>
<div class="content-outer">
<div class="row add-bottom">
<div class="twelve columns" style=" text-align:center;">
<table style="width: 100%;">
<tbody style="border: 10px solid; ">
<tr>
<td id="{{$stimuli['comparison'][0]}}"> <a href='response/{{ $stimuli['comparison'][0]}}'><img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][0]) }}.jpg' /></a></td>
<td id="{{$stimuli['comparison'][1]}}"> <a href='response/{{ $stimuli['comparison'][1]}}'><img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][1]) }}.jpg' /></a></td>
<td id="{{$stimuli['comparison'][2]}}"><a href='response/{{ $stimuli['comparison'][2]}}'> <img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][2]) }}.jpg' /></a></td>
</tr>
<tr>
<td> </td>
<td id="sample" style="padding: 10px; border: 15px solid #000;">
<img class='trial' src='{{ url('taskAssets/'.$stimuli['sample'][0]) }}.jpg'/></td>
<td> </td>
</tr>
<tr>
<td id="{{$stimuli['comparison'][3]}}"><a href='response/{{ $stimuli['comparison'][3]}}'> <img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][3]) }}.jpg' /></a></td>
<td id="{{$stimuli['comparison'][4]}}"> <a href='response/{{ $stimuli['comparison'][4]}}'><img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][4]) }}.jpg' /></a></td>
<td id="{{$stimuli['comparison'][5]}}"> <a href='response/{{ $stimuli['comparison'][5]}}'><img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][5]) }}.jpg' /></a></td>
</tr>
</tbody>
</table>
</div> <!-- Row End-->
</div>
</div>
<script>
CSS
trial
{
height: 175px;
width:200px;
object-fit: contain;
}
.ui-effects-transfer {
background:url("http://images.clipartpanda.com/finger-clipart-pointing-finger-md.png") no-repeat;
opacity: .8;
z-index: 10;
margin-top: 70px;
background-position: 50% 50%;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left:0;
background-size: 60px auto;
}
table td
{
position: relative;
}
输出HTML 排除非工作效果的时候（所以我们看到工作追加）。
<!DOCTYPE html>
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<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>
<head>
<!--- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="http://localhost:8888/pp/public/assets/css/default.css">
<link rel="stylesheet" href="http://localhost:8888/pp/public/assets/css/layout.css">
<link rel="stylesheet" href="http://localhost:8888/pp/public/public/assets/css/media-queries.css">
<!-- Script
================================================== -->
<script src="js/modernizr.js"></script>
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="favicon.ico" >
</head>
<div class="content-outer">
<div class="row add-bottom">
<div class="twelve columns" style=" text-align:center;">
<table style="width: 100%;">
<tbody style="border: 10px solid; ">
<tr>
<td id="mouse"> <a href='response/mouse'><img class='trial' src='http://localhost:8888/pp/public/taskAssets/mouse.jpg' /></a></td>
<td id="cow"> <a href='response/cow'><img class='trial' src='http://localhost:8888/pp/public/taskAssets/cow.jpg' /></a></td>
<td id="dog"><a href='response/dog'> <img class='trial' src='http://localhost:8888/pp/public/taskAssets/dog.jpg' /></a></td>
</tr>
<tr>
<td> </td>
<td id="sample" style="padding: 10px; border: 15px solid #000;">
<img class='trial' src='http://localhost:8888/pp/public/taskAssets/mouse.jpg'/></td>
<td> </td>
</tr>
<tr>
<td id="car"><a href='response/car'> <img class='trial' src='http://localhost:8888/pp/public/taskAssets/car.jpg' /></a></td>
<td id="cat"> <a href='response/cat'><img class='trial' src='http://localhost:8888/pp/public/taskAssets/cat.jpg' /></a></td>
<td id="house"> <a href='response/house'><img class='trial' src='http://localhost:8888/pp/public/taskAssets/house.jpg' /></a></td>
</tr>
</tbody>
</table>
</div> <!-- Row End-->
</div>
</div>
<script>
$("#sample").effect("highlight", {duration: 6000, queue: false});
$("#sample").effect("transfer", {to: $("#mouse")}, 7000, function () {
$('#mouse').append('<a href="response/mouse"><div class="ui-effects-transfer"></div></a>');
});
$('#sample').effect("highlight",{ queue: true }, 6000});
</script>
<!--
<script>
var x = #mouse;
setInterval(function() {
$("#sample").effect("transfer", {to: $(x)}, 9000);
}, 1000);
</script>-->
<!-- footer
================================================== -->
<footer>
<div class="row">
<div class="twelve columns">
<ul class="footer-social">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul>
<ul class="copyright">
<li>Copyright © 2015 JP Foster</li>
<li>Design by <a href="http://www.styleshout.com/">Sparrow.</a></li>
</ul>
</div>
<div id="go-top" style="display: block;"><a title="Back to Top" href="#">Go To Top</a></div>
</div>
</footer> <!-- Footer End-->
<!-- Java Script
================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/doubletaptogo.js"></script>
<script src="js/init.js"></script>
</body>
</html>