相同的动画使用animate.css多次

Question

我试图拉动以下内容。请帮助。

要求是使用： 1. Animate.css 2. jquery-1.10.1.min.js

从Animate.css中只需要使用展开式动画。要求是在我当地的手表店。他们希望他们的客户能够亲自试用手表（类似于www.lenskart.com效果）。

我能够在同一页面上一次只运行一个动画（即expandOpen），如下所述运行代码。

页面的设计应采用图片中显示的方式：

要显示多个手表，如图像中所示。需要在每只手表上实施expandOpen的效果，以便在手腕上进行尝试。

目前，当我想试一下手表（比如第一个）时，它会完美地动画。但是，当我想为第二块手表制作动画时，它不起作用。

我很感激任何有关在按钮上实现expandOpen的相同效果的帮助，可能没有页面刷新。

我的HTML代码是： {

<section id="animation">
        <div class="animation-container">
            <div id="object" class="animate"></div>
            <img src="images/hand_watches.png" />
        </div>
    </section>

    <section id="actions">
        <div class="container">
            <h2>Try the Watch</h2>
            <a href="#" id="expandOpenBtn" class="button"><img src="images/watch1.png"><br>Try Me!</a>          
            <a href="#" id="expandOpenBtn" class="button"><img src="images/watch1.png"><br>Try Me!</a>          
            <a href="#" id="expandOpenBtn" class="button"><img src="images/watch1.png"><br>Try Me!</a>          
            <a href="#" id="expandOpenBtn" class="button"><img src="images/watch1.png"><br>Try Me!</a>          
            <a href="#" id="expandOpenBtn" class="button"><img src="images/watch1.png"><br>Try Me!</a>          
        </div>
    </section>

    <script>
        $('#expandOpenBtn').click(function() {
            $(this).each(function(){
                    $('#object').removeClass('animate expandOpen');             
                    $('#object').addClass("animate expandOpen");
                });
        }); 
    </script>

}

用于动画的CSS代码是： {

.expandOpen{
    animation-name: expandOpen;
    -webkit-animation-name: expandOpen; 

    animation-duration: 1.2s;   
    -webkit-animation-duration: 1.2s;

    animation-timing-function: ease-out;    
    -webkit-animation-timing-function: ease-out;    

    visibility: visible !important; 
}

@keyframes expandOpen {
    0% {
        transform: scale(1.8);      
    }
    50% {
        transform: scale(0.95);
    }   
    80% {
        transform: scale(1.05);
    }
    90% {
        transform: scale(0.98);
    }   
    100% {
        transform: scale(1);
    }           
}

@-webkit-keyframes expandOpen {
    0% {
        -webkit-transform: scale(1.8);      
    }
    50% {
        -webkit-transform: scale(0.95);
    }   
    80% {
        -webkit-transform: scale(1.05);
    }
    90% {
        -webkit-transform: scale(0.98);
    }   
    100% {
        -webkit-transform: scale(1);
    }                   
}

}

jQuery使用的是： jQuery v1.10.1.js

使用的图片： 1.手 2.

此人应该能够点击一只手表并在显示的手腕上看到它展开。并且应该能够多次这样做。