javascript - 使用 Jquery 进行转换

Question

我正在使用 javascript 进行背景颜色过渡，我想将其移植到使用Jquery，但我的代码有问题，Jquery 版本正在削减效果，可以帮我解决这个问题吗？

JS 工作版本:

var f = document.getElementById('test');
function updateTransition() {
  var el = document.querySelector("span.state1");

  if (el) {
    el.className = el.className.replace("state1","state2");
  } else {
    el = document.querySelector("span.state2");
    el.className = el.className.replace("state2","state1");
  }
  return el;
}
f.addEventListener("transitionend", updateTransition, true);
var intervalID = window.setInterval(updateTransition, 1000);

JQUERY 不工作版本:

$('#test2').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend',function(){
            $(this).toggleClass('state1');
            });
var testi = setInterval(function(){
            $('#test2').toggleClass('state2');
    },1000);

fiddle :http://jsfiddle.net/MxAX9/27/
编辑:谢谢大家，现在我明白了......

Answer 1

这是您要找的吗？

快速浏览一下它的作用，非常简单......

• 检查函数是否处于状态1；否则根据你所说的它将处于状态2
• 删除当前类别，并添加更新的类别。

就这样做:

setInterval(function(){$('#testy')
    if($('#testy').hasClass('state1')){
        $('#testy').removeClass('state1').addClass('state2');
    }
    else{
        $('#testy').removeClass('state2').addClass('state1');
    }
   },1000);

您可以根据需要更改间隔。

如果你想用它来创建一个函数来响应事件，那么你可以这样做:

this.transition = function(){
  setInterval(function(){$('#testy')
    if($('#testy').hasClass('state1')){
        $('#testy').removeClass('state1').addClass('state2');
    }
    else{
        $('#testy').removeClass('state2').addClass('state1');
    }
   },1000);
};

$(document).ready(function(){ //will execute on page load; but you can choose to do whatever you like, on click, on hover etc.
    transition();
});

FIDDLE http://jsfiddle.net/MxAX9/29/