几个动画函数的简称

Question

我在click函数中有许多动画函数。他们有没有用更少的代码来做这件事的捷径?

$( "#contentdiv" ).click(function(){
$( "#img1" ).animate({
width: "300px",
height: "500px",
left:"-300px",
top:"-70px"
 }, 1000,"linear", function() {
// Animation complete.
});
$( "#img2" ).animate({
width: "400px",
height: "200px",
left:"-50px",
top:"-250px"
}, 1000,"linear", function() {
// Animation complete.
});
$( "#img3" ).animate({
width: "50px",
height: "50px",
left:"100px",
top:"-50px"
}, 1000,"linear", function() {
// Animation complete.
});
$( "#img4" ).animate({
width: "50px",
height: "50px",
left:"170px",
top:"-50px"
}, 1000,"linear", function() {
// Animation complete.
 });
$( "#img5" ).animate({
width: "345px",
height: "150px",
left:"30px",
top:"50px"
}, 1000,"linear", function() {
// Animation complete.
 });
$( "#img6" ).animate({
width: "100px",
height: "50px",
left:"115px",
top:"124px"
}, 1000,"linear", function() {
 // Animation complete.
});
$( "#img8" ).animate({
width: "50px",
height: "50px",
left:"135px",
top:"228px"
 }, 1000,"linear", function() {
// Animation complete.
 });
$( "#img7" ).animate({
width: "50px",
height: "50px",
left:"205px",
top:"228px"
}, 1000,"linear", function() {
// Animation complete.
});
$( "#img9" ).animate({
width: "320px",
height: "170px",
left:"34px",
top:"326px"
 }, 1000,"linear", function() {
// Animation complete.
});
$( "#img15" ).animate({
width: "100px",
height: "50px",
left:"132px",
top:"400px"
}, 1000,"linear", function() {
// Animation complete.
});
$( "#img14" ).animate({
width: "179px",
height: "27px",
left:"109px",
top:"296px"
}, 1000,"linear", function() {
// Animation complete.
});
$( "#img11" ).animate({
width: "50px",
height: "50px",
left:"435px",
top:"70px"
}, 1000,"linear", function() {
// Animation complete.
});
 $( "#img12" ).animate({
width: "50px",
height: "50px",
left:"435px",
top:"130px"
 }, 1000,"linear", function() {
// Animation complete.
 });
 $( "#img10" ).animate({
width: "345px",
height: "150px",
left:"550px",
top:"50px"
}, 1000,"linear", function() {
// Animation complete.
});
$( "#img13" ).animate({
width: "100px",
height: "50px",
left:"565px",
top:"100px"
}, 1000,"linear", function() {
// Animation complete.
});
$( "#img26" ).animate({
width: "100px",
height: "50px",
left:"100px",
top:"-220px"
}, 1000,"linear", function() {
// Animation complete.
});
 $( "#img16" ).animate({
left:"100px",
top:"-220px"
}, 1000,"linear", function() {
// Animation complete.
 });
  $( "#img17" ).animate({
left:"100px",
top:"-220px"
}, 1000,"linear", function() {
// Animation complete.
});
$( "#img24" ).animate({
left:"50px",
top:"-30px"
}, 1000,"linear", function() {
// Animation complete.
});
$( "#img25" ).animate({
left:"250px",
top:"-30px"
}, 1000,"linear", function() {
// Animation complete.
 });
 $( "#img18" ).animate({
width:"80px",
left:"425px",
top:"36px"
}, 1000,"linear", function() {
// Animation complete.
});
$( "#img19" ).animate({
width:"80px",
left:"425px",
top:"175px"
}, 1000,"linear", function() {
// Animation complete.
});
$( "#img22" ).animate({
left:"73px",
top:"210px"
}, 1000,"linear", function() {
// Animation complete.
});
$( "#img23" ).animate({
left:"260px",
top:"210px"
}, 1000,"linear", function() {
// Animation complete.
});
 $( "#img20" ).animate({
width:"100px",
height:"50px",
left:"30px",
top:"234px"
}, 1000,"linear", function() {
// Animation complete.
});
$( "#img21" ).animate({
width:"100px",
height:"50px",
left:"260px",
top:"234px"
}, 1000,"linear", function() {
// Animation complete.
});
});

Answer 1

创建一个通用的动画函数，并将所有的值传递给它。

例如

。:

function animateElements(elm, width, height, left, top) {
//jquery animation code
}

Answer 2

使用像这样的常用函数

function animate(selector, width, height, left, top, duration , effect, callback) {
    $(selector).animate({
           width:width,
           height:height
           left:left,
           top:top
      }, duration, effect, callback);
}

这样调用;

animate('#img1' , "300px" , "150px" , "400px" , "90px" , "1000" , "linear" , sample2);