jQuery控制DIV层实现由大到小，由远及近动画变化效果

要实现“由大到小，由远及近”的动画变化效果，可以使用jQuery来操作CSS样式。以下是实现的完整攻略：

1. HTML结构

首先，需要有一个包裹目标div的框架外层div，用来控制整体居中和定位。

<div id="box">
  <div id="target">这是一个目标div</div>
</div>

2. CSS样式

为了实现动画效果，需要设置一些初始的CSS样式。其中包括，目标div的初始样式、框架外层div的定位和宽高等样式。

#box {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 0 auto;
}
#target {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background-color: red;
}

3. jQuery操作

使用jQuery来操作目标div的样式，可以通过设置CSS样式，实现“由大到小，由远及近”的动画变化效果。具体可以通过修改目标div的宽高、位置和透明度等属性来实现。

以“由大到小”为例，可以使用animate函数在一定的时间内逐渐改变目标div的宽高和位置，实现“有弹簧效果”的缩小动画效果。同时，为了避免目标div的位置和大小变化，需要在动画执行之前先记录其原始位置和大小。

// 获取目标div的位置和大小
var target = $("#target");
var pos = target.position();
var width = target.width();
var height = target.height();
// 缩小动画效果
target.animate({
  width: 50,
  height: 50,
  top: pos.top + (height - 50) / 2,
  left: pos.left + (width - 50) / 2,
  opacity: 0
}, 1000);

以“由远及近”为例，可以通过设置目标div的CSS样式transform，实现缩放和透明度的动画效果。具体可以使用scale、translate等函数来实现。

// 放大动画效果
target.css({
  transform: "scale(0)",
  opacity: 0
})
.animate({
  transform: "scale(1)",
  opacity: 1
}, 1000);

以上两种示例代码均实现了“目标div由大到小，由远及近”的动画变化效果。具体可以根据需要设置时间、运动曲线和回调函数等参数，进行定制化的动画效果。