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);

小提琴：http://jsfiddle.net/MxAX9/27/
编辑：谢谢你们，现在我明白了......

Answer 1

这是你在找什么？

快速完成这项工作，真的很直接......

检查功能是否处于state1;否则你所说的将是在state2
删除当前类，并添加更新的类。

只是做：

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/

Answer 2

$('#test2').toggleClass('state2');

这只会应用或删除state2但对state1没有影响（意味着切换不会添加state1）

你需要自己动手：

var testi = setInterval(function(){
    var $span = $('#test2');
   if($span.hasClass( "state2" )){
       $span.removeClass("state2").addClass("state1");
   }
   else{
        $span.removeClass("state1").addClass("state2");
    }

},1000);

这是一个小提琴： http://jsfiddle.net/MxAX9/30/

转发与Jquery

2 个答案: