Question

我想在我的代码中使用这种类型的动画，但不知道如何执行。我有5个徽标图像，当点击其中任何一个时，然后跟随动画应该点击徽标：

第一个应该在点击时缩小然后缩放然后再缩小然后消失。（*仅应使用opacity:0消失）和其他徽标的动画：在此动画之间，所有其他徽标都以随机顺序具有上面定义的相同动画，并且消失得如此之快以至于用户在徽标消失中获得闪烁效果。然后容器div应该被隐藏。

我到目前为止尝试的所有代码如下所示。这段代码实现的第一部分是点击它缩小然后缩放然后再次缩小并消失。

有人告诉我在链接动画中使用队列，但我应该如何在这里使用

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600' rel='stylesheet' type='text/css'>

        <script src="js/jquery.js"></script> 
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>    
        <style type="text/css">

        </style>

<script>
$(document).ready(function(){

          $(".l1").click(function(){
                      $(".l1").animate({
                      height:'90px', 
                      width:'90px', 
                      opacity:'0.5',
                      queue:false,
                      duration:1000
                      },"easeInOutSine")
                             .animate({
                              height:'128px', 
                              width:'128px', 
                              opacity:'0.6',
                              queue: true,
                              duration: 1000,
                              },"easeInOutSine",function() { })
                              .animate({
                              height:'50px', 
                              width:'50px', 
                              opacity:'0',
                              queue: true,
                              duration: 1000,
                              },"easeInOutSine",function() {

                              });

                      });
});

</script>
    </head>
    <body>
    <div class="container">
      <table align="center" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td><img src="img/coke.png"   class="l1"/></td>
      <td><img src="img/coke.png"   class="l2"/></td>
      <td><img src="img/coke.png"   class="l3"/></td>
      <td><img src="img/coke.png"   class="l4"/></td>
      <td><img src="img/coke.png"   class="l5"/></td>
      </tr>
     </table>
     </div>

    </body>
</html>

Answer 1

jQuery UI Highlight效果是您轻松实现它所需要的。

$("l1").click(function () {
      //$(this).effect("highlight", {}, 3000); //If you need to play with time
      $( this ).toggle( "highlight" );
});

可以在此处找到文档和演示。 http://api.jqueryui.com/highlight-effect/

Here is a example jsFiddle

如何在jquery中给出闪烁效果

1 个答案: