jQuery激活CSS動畫？

我得到了一個紅色的正方形（DIV），每次點擊它我都喜歡它使用CSS動畫淡入和淡出。jQuery激活CSS動畫？

<div id="BLOCK" style="background-color:red;width:150px;height:150px;">RED SQUARE</div> 

<script>$('#BLOCK').click(function() {});</script>

當我掛了動畫的一類這樣的褪色它的工作原理：

<script>$('#BLOCK').click(function() { $('#BLOCK').addClass('fade'); });</script>

但是，一旦我再次點擊，什麼都沒有發生，因爲類已經添加，這是相當邏輯。但這不起作用。

<script>$('#BLOCK').click(function() { $('#BLOCK').removeClass('fade'); $('#BLOCK').addClass('fade'); });</script>

那麼有誰知道更好的方法？

來源

2012-03-24 Mark

什麼是你的CSS動畫的樣子（代碼明智）？ – m90 2012-03-24 10:22:22

如果你在這兩個類上添加css轉換，它應該來回工作 – szajmon 2012-03-24 10:33:20

做一個簡單的例子：

http://jsfiddle.net/Uc8vn/

$(function(){ 
    $('a').click(function(ev){ 
     $('div').toggleClass('fade'); 
     ev.preventDefault(); 
    }); 
}); 

div{ 
    transition:opacity .3s linear; 
    -moz-transition:opacity .3s linear; 
    -webkit-transition:opacity .3s linear; 
    opacity:1; 
    width:100px; 
    height:100px; 
    background:red; 
} 
div.fade{ 
    opacity:0; 
}

來源

2012-03-24 10:37:34 Andy

謝謝安迪你搖滾！ – Mark 2012-03-24 10:40:27

@Mark很高興我能幫忙:) – Andy 2012-03-24 11:22:37

如果你已經在使用jQuery，爲什麼不用jQuery做fadin動畫？

$('#BLOCK').click(function() { 
    $(this).fadeIn(function() { // Callback for chaining 
     $(this).fadeOut(); 
    ); 
});

來源

2012-03-24 10:20:08

衰落只是一個更復雜的動畫的例子，但我沒有使用jQuery的動畫，因爲大多數舊的iOS設備在執行它們時遇到了麻煩，不會像CSS動畫一樣流暢（檢查自己）。 – Mark 2012-03-24 10:25:37

您也可以暫停和播放使用動畫播放-state屬性動畫。我使用全局變量來防止動畫冒泡。

這裏看到這個快速演示小提琴 - >http://jsfiddle.net/d5mym5e7/6/

var running = 0; 
$('#fade').on('click',function(){ 
    if (running === 0){ 
     running = 1; 
     $('.box').css({ 
      '-webkit-animation-play-state':'running' 
     }); 
     setTimeout(function(){ 
      $('.box').css({ 
       '-webkit-animation-play-state':'paused' 
      }); 
      running = 0; 
      console.log(running); 
     },4000); 
    } else { 
     console.log('let me finish'); 
    } 
});

來源

2014-10-21 10:22:44 JonasB

jQuery激活CSS動畫？

回答

相關問題