如何在jquery中给出闪烁效果答案

【问题标题】：how to give blinking effects in jquery如何在jquery中给出闪烁效果
【发布时间】：2014-02-01 08:27:18
【问题描述】：

我想在我的代码中使用这种类型的动画，但不知道如何执行。我有 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>

【问题讨论】：

嗨，用户，在 jquery 中使用 fadeIn() 和 fadeOut()，这里是代码，$(this).fadeOut().next().delay(500).fadeIn();
你能给我这个代码的工作演示或者告诉我是否应该应用这个
@user2750762 通过工作演示查看我的答案
哥们试试你的代码替换 $('.l1') 为 $('.li')
我不明白。 l1 是类名，li 是这里的标签，我没有使用列表

标签： jquery animation queue

【解决方案1】：

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

$("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

【讨论】：

这与我想要的效果相同，但不包括缩放部分，您能告诉我如何为所有徽标执行此操作