Question

我有一个动画功能会在每次点击一堆按钮时发生，它们都会有特定的事情发生，但动画会每次都发生。现在我已经设置了它，所以它是点击的一部分，所以我每次都重新定义，如何设置一次，然后对每个按钮只是说点击时运行该功能？

现在它设置为：

$("#animation1").click(function() {
$("#clinic_850_CONTAINER").animate({
    height: box_TOTAL_ht + 20
}, 300);

$("#staff_850_CONTAINER").animate({
    marginTop: staff_850_CONTAINER_ht * -1
}, 300);

$("#profile_850_HEADER").delay(160).animate({
    top: 10
}, 270);
$("#profile_850_BIO").delay(330).animate({
    top: profile_850_HEADER_ht + 20
}, 400);
$("#profile_850_EDU").delay(450).animate({
    top: profile_850_HEADER_ht + profile_850_BIO_ht + 20
}, 400);
$("#profile_850_CONTACT").delay(570).animate({
    top: profile_850_HEADER_ht + profile_850_BIO_ht + profile_850_EDU_ht + 20
}, 400);

});

如此设置会在页面加载时运行，如何阻止它运行直到点击发生但是保持它们是单独的

function profile_850_close_animation() {
$("#staff_850_CONTAINER").animate({
    marginTop: 0
}, 300);

$("#clinic_850_CONTAINER").animate({
    height: staff_850_CONTAINER_ht
}, 300);

$("#profile_850_HEADER").animate({
    top: box_TOTAL_ht + 20
}, 300);
$("#profile_850_BIO").animate({
    top: box_TOTAL_ht + 50
}, 450);
$("#profile_850_EDU").animate({
    top: box_TOTAL_ht + 60
}, 450);
$("#profile_850_CONTACT").animate({
    top: box_TOTAL_ht + 70
}, 450);  
}

$("#profile_850_CLOSE").click(profile_850_open_animation());

Answer 1

这两种方法都有效：

$("#animation1, #animation2, #animation3").click(function() {
    // existing code
});

或

function animate() {
    //existing code
}
$("#animation1").click(animate);

Answer 2

要应用的设置类。我需要看到html结构以更好地优化你的点击处理程序和动画，但你可以指定相对于动画点击或者可能检查id来确定要动画的其他元素。

Answer 3

function animation() {
// Animation code goes here
}

$("#animation1").click(animation);

此外，您可以使用jquery选择器选择所有按钮并立即分配其onclick事件。例如，如果所有动画按钮都是类按钮

$(".animation").click(animation);

设置在点击事件期间稍后调用的函数

3 个答案: