文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在jquery中实现闪烁效果

问如何在jquery中实现闪烁效果
EN

Stack Overflow用户

提问于 2014-02-01 16:27:18

回答 1查看 1.7K关注 0票数 0

我想在我的代码中这种类型的动画，但不知道如何执行。我有5个logo图像，当点击它们中的任何一个时，下面的动画应该发生在点击的logo上：

第一个应该在点击时缩小，然后缩放，然后再次缩小，然后消失。(*只有通过使用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

animation

queue

回答 1

Stack Overflow用户

发布于 2014-02-01 17:02:44

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21495854

复制

相似问题

问如何在jquery中实现闪烁效果
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jquery中实现闪烁效果EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jquery中实现闪烁效果
EN