Question

我在点击功能中有很多动画功能。他们用较少的代码来做任何简短的方法吗？

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

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

对于Eg。：

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);

几种动画功能的简短形式

2 个答案: