jquery中的多个褪色动画

本文介绍了jquery中的多个褪色动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想淡入几个水平排列的方块。
说每个框属于 fadeable 类，并且有一个id。
此外，我想从外面剔除盒子。例如：

I'd like to fade in several boxes aligned horizontally one after the next.Say each box belongs to class fadeable and has an id.Addtionally, I'd like to fade the boxes from the outside in. For example:

_ _ _ _ _ _ _ _ _
+_ _ _ _ _ _ _ _
+_ _ _ _ _ _ _ +
+ + _ _ _ _ _ _ +
+ + _ _ _ _ _ + +
+ + + _ _ _ _ + +

等等。
使用jQuery的最好方法是什么？

and so forth.What is the best way to figure this out using jQuery?

这里是我现在（大致） - 给每个框div一个自动递增的元数据id boxid 并执行以下操作：

Here's what I have now (roughly) - give each box div an auto-incrementing metadata id boxid and preform the following:

max = $(".fadeable:last").attr('boxid');
for(i=0;i<max;i++)
{
    $("[boxid=" + i + "]").fadeIn('fast');
    $("[boxid=" + (max-i) + "]").fadeIn('fast');
}

有更好/更平滑的方法吗？（有动画或排队？）
另外，在CSS中排列元素的最好方法是什么？

is there a better/smoother way to do this? (with animate, or by queuing?)Addtionally, what is the best way to go about arranging the elements in CSS?

谢谢！

推荐答案

好吧，看起来你的问题引发了很多研究！这是我想出的。我使它更像一个jQuery插件风格，所以有一些额外的代码，因为它，但它可以很容易地重用在整个项目。此外，您可以将 fadeIn 设置为 false ，它将以相同的模式淡出：

Well, it looked like your question sparked a lot of research! Here is what I came up with. I made it more of a jQuery plugin style, so there is some extra code because of it, but it can be easily reused throughout your project. Additionally, you can set fadeIn to false and it will fade out in the same pattern:

<!DOCTYPE html >
<html>
<head>
<style type="text/css" media="screen">
  #items { height:50px; text-align: center; line-height: 50px; }
  #items div {
    width: 50px; height: 50px;
    float: left; position: relative;
    background: red;
    opacity: 0.0; -moz-opacity: 0.0; filter:alpha(opacity=0);
  }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
  $.fn.fadeFromOutside = function(opts){
    if(this.size() > 0){
      var options = options = $.extend({}, $.fn.fadeFromOutside.defaults, opts),
        size    = this.size(),
        steps   = Math.ceil(size / 2), // Always round up
        fade_in = options.fadeIn,
        time    = options.length,
        wait    = Math.floor(time / steps), // Delay between fades
        items   = this.css({opacity: (fade_in ? 0.0 : 1.0)}),
        fade_to = (fade_in ? 1.0 : 0.0); // Decide what the final opacity should be.

      // We are using a private internal function to handle
      // the processing and delayed fadeIn.
      var fade_action = function(one, two, count_left, delay){
        /* If a callback is present, and this is the last iteration
           then this sets it up to be called */
        var callback = null;
        if( options.complete && count_left == (steps - 1))
          callback = options.complete;

        /* Always animate 'one' */
        $(one).animate({opacity: fade_to}, {duration: time, complete: callback});
        /* Animate two if its not the same as one.
           two will equal one on the last step of odd numbered sets */
        if(one != two)
          $(two).animate({opacity: fade_to}, time);

        if(count_left < steps){
          window.setTimeout(function(){
            fade_action(
              items.get(count_left),
              items.get(size - 1 - count_left),
              count_left + 1,
              delay);
          }, delay);
        }
      }

      // Start the fade
      fade_action(items.get(0), items.get(size - 1), 1, wait);

    }
    return this; // Don't break the chain
  }

  $.fn.fadeFromOutside.defaults = {
    fadeIn: true,
    length: 1000
  }

  /* DOM Ready */
  $(function(){
    $("#items > div").fadeFromOutside({
      fadeIn: true, // Set to false to fade out
      length: 2000, // Take two seconds
      complete: function(){
        alert('done!'); // Alert when finished
      }
    });
  });
</script>

</head>

<body>
<div id="items">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>
</body>
</html>

如果元素以 display：none 或者他们需要fadeOut并以 display：none 结束，然后使用以下命令来启动插件：

If the elements start as display:none or they need to fadeOut and end as display:none then use the following command instead to initiate the plugin:

// fadeIn: Assumes the div's start as display:none
$("#items > div")
  .css({display: block, opacity: 0.0})
  .fadeFromOutside();

// fadeOut: Will hide all divs at the end
$("#items > div")
  .fadeFromOutside({
    complete: function(){ $("#items > div").hide() }
  });
});

这篇关于jquery中的多个褪色动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

fadeout