Javascript jquery。单页多效_Javascript_Jquery_Css

Javascript jquery。单页多效

javascript jquery css

Javascript jquery。单页多效,javascript,jquery,css,Javascript,Jquery,Css,到目前为止，我已经了解到所有的效果和动画都是排队的。但是，当你有多种效果，有些是队列，有些不是队列时，该怎么办呢我试图得到两个同时出现的样本效果，所有这些效果都有效但我希望ui效果传输也能正常工作，但只能在其他动画运行之后。我已经按照代码中显示的方式进行了尝试。我试过不排队，我试过简单的效果（“摇晃”，“缓慢”）问题是：抖动效果实际上不起作用，但我对其进行了编码。从来没有出现过。它只在我排队时起作用：false ui效果传输（抖动）动画永远不会发生 $("#sample").effect

到目前为止，我已经了解到所有的效果和动画都是排队的。但是，当你有多种效果，有些是队列，有些不是队列时，该怎么办呢

我试图得到两个同时出现的样本效果，所有这些效果都有效

但我希望ui效果传输也能正常工作，但只能在其他动画运行之后。我已经按照代码中显示的方式进行了尝试。我试过不排队，我试过简单的效果（“摇晃”，“缓慢”）

问题是：抖动效果实际上不起作用，但我对其进行了编码。从来没有出现过。它只在我排队时起作用：false

ui效果传输（抖动）动画永远不会发生

 $("#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（因此我们看到工作追加）


$（“#样本”）.effect（“突出显示”，{duration:6000，queue:false}）；
$（“#示例”）.effect（“传输”，{to:$（“#鼠标”）}，7000，函数（）{
$（“#鼠标”）.append（“”）；
});
$（'#sample'）.effect（“highlight”，{queue:true}，6000}）；





版权及副本；2015年福斯特太平绅士
设计人

window.jQuery | | document.write（“”）

可以包括

html

，

css

问题？什么是

$stimuli

？$stimuli['sample'][0]将等于6$stimuli['comparison']中的一个。抖动是唯一不起作用的效果尝试放置

$（.ui效果转移”）。效果（“抖动”，“队列：真”，“慢”）在$（'{$stimulis['sample'][0]}}}'）之后。在$（“#sample”）.effect（“transfer”），
完成回调。正如.ui-effects-transfer
在js
问题中调用时，不是DOM
元素；$（.ui-effects-transfer”）
在将元素追加到位于js的文档之前被调用
<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>

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;


  }

    <!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 &copy; 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>