jQuery根据时间动画div

时间:2015-09-21 08:37:33

标签: javascript jquery html

我在div标签中显示祷告时间,如果在祷告时间接近15 - 20分钟,我想为这个特殊的div设置动画。

<div class="pt-time"><b>Fajr</b><br> <span id="ContentPlaceHolder1_lblFajrTime">04:48</span></div>                  </div>
<div class="pt-circle"><div class="pt-time"><b>Dhur</b><br><span id="ContentPlaceHolder1_lblDhurTime">12:19</span></div></div>
<div class="pt-circle"><div class="pt-time"><b>Asr</b><br><span id="ContentPlaceHolder1_lblAsrTime">15:43</span></div></div>
<div class="pt-circle"><div class="pt-time"><b>Magrib</b><br><span id="ContentPlaceHolder1_lblMagribTime">18:19</span></div></div>
<div class="pt-circle"><div class="pt-time"><b>Isha</b><br><span id="ContentPlaceHolder1_lblIshaTime">19:49</span></div></div>

让我们说我想要从12:00 - 12:19为第二个圆圈的边框设置动画。

提醒祷告时间每天至少改变1分钟。

小提琴link

1 个答案:

答案 0 :(得分:1)

我用笔做了一个小叉子:http://codepen.io/Saar/pen/YyWVpW?editors=101

基本上这是代码(20分钟或更短时间,每5分钟运行一次):

li.location {
    max-width: 100%;
    width: 450px;
    display: inline-block;
    padding: 50px 100px; //Change padding
    float: left; //Keep float left
}