为什么我的动画在 Ipad 中很慢
Why my animation is slow in Ipad
我正在构建一组 jquery 动画,我的动画在 Desktop 中非常棒,但是当我在 Ipad 中测试时它显示得很慢。我想知道,为什么它在 ipad 中这么慢
这是我的 Jquery 代码。
/* --------------------------------SLIDE DO ASIDE --------------------------------*/
$("#wrapper div.targe").on('pointerdown', function() {
$(this).next("div.discuss").next(".afteraside").toggleClass("after_discuss");
$(this).next("div.discuss").toggle("slide", {direction: "right"}, 400);
return false;
});
/* --------------------------------NOTA DE RODAPÉ --------------------------------*/
$(document).ready(function() {
$("#wrapper img.footnote").next().css("display", "none");
$('nav').localScroll({ duration: 300 });
$('#wrapper div.slick').slick({
dots: false,
arrows: false,
draggable: true,
speed: 500,
touchMove: false
});
});
$("#wrapper img.footnote").on('pointerdown', function() {
$(this).toggleClass("footchange");
$(this).next().slideToggle();
/*.addClass("hidden_footnote")*/
if($(this).hasClass("footchange")) {
$(this).attr("src", "image/hide_fnt.png");
}
else {
$(this).attr("src", "image/show_fnt.png");
}
return false;
});
/* ------------------------SLIDE EXERCICIOS------------------------ */
$("#wrapper img.imagesolucao").on('pointerdown', function() {
$(this).next("div.solucao").slideToggle();
return false;
});
$("#wrapper div.bloco2").find("li.nextslide").on('pointerdown', function() {
$(this).closest("div.bloco2").next("div.slick").slickNext();
$("div.solucao").hide();
});
$("#wrapper div.bloco2").find("li.prevslide").on('pointerdown', function() {
$(this).closest("div.bloco2").next("div.slick").slickPrev();
$("div.solucao").hide();
});
/*---------------------SUBMENU----------------------*/
$("#nav4 a").on('pointerdown', function(){
$("ul.submenu").slideToggle();
});
/*-----------------------AUDIO-----------------------*/
$("#nav6").on('pointerdown', function(){
var audio = $(".home_audio");
audio.toggleClass("audio_on");
if(audio.hasClass("audio_on")) {
audio.trigger("play");
}
else {
audio.trigger("pause");
}
});
/*----------------- VERIFICAR ACERTOS -------------*/
function verificarAcertos(){
var cont = 0;
$('#wrapper div.radio').find("input[type='radio']").each(function() {
if($(this).is(':checked') && $(this).hasClass("correct_answer")){
$(this).next('label').css("color", "#022954").css("font-weight", "bold");
cont++;
$(this).closest("div.option").closest("div.radio").find("input[type='radio']").attr("disabled", true);
}
else if($(this).is(':checked') && !($(this).hasClass("correct_answer"))){
$(this).next('label').css("color", "red").addClass("label2");
$(this).attr("disabled", true);
}
});
$("#wrapper p.counting").text(cont);
}
我注意到 .attr() 大大降低了 iPad 的速度。访问属性的方式必须与其他方式不同,否则我的动画会非常流畅。
我很幸运地保留了一个包含值的单独数组并循环遍历这些值。
注释掉 .attr() 行并重试动画。
我正在构建一组 jquery 动画,我的动画在 Desktop 中非常棒,但是当我在 Ipad 中测试时它显示得很慢。我想知道,为什么它在 ipad 中这么慢 这是我的 Jquery 代码。
/* --------------------------------SLIDE DO ASIDE --------------------------------*/
$("#wrapper div.targe").on('pointerdown', function() {
$(this).next("div.discuss").next(".afteraside").toggleClass("after_discuss");
$(this).next("div.discuss").toggle("slide", {direction: "right"}, 400);
return false;
});
/* --------------------------------NOTA DE RODAPÉ --------------------------------*/
$(document).ready(function() {
$("#wrapper img.footnote").next().css("display", "none");
$('nav').localScroll({ duration: 300 });
$('#wrapper div.slick').slick({
dots: false,
arrows: false,
draggable: true,
speed: 500,
touchMove: false
});
});
$("#wrapper img.footnote").on('pointerdown', function() {
$(this).toggleClass("footchange");
$(this).next().slideToggle();
/*.addClass("hidden_footnote")*/
if($(this).hasClass("footchange")) {
$(this).attr("src", "image/hide_fnt.png");
}
else {
$(this).attr("src", "image/show_fnt.png");
}
return false;
});
/* ------------------------SLIDE EXERCICIOS------------------------ */
$("#wrapper img.imagesolucao").on('pointerdown', function() {
$(this).next("div.solucao").slideToggle();
return false;
});
$("#wrapper div.bloco2").find("li.nextslide").on('pointerdown', function() {
$(this).closest("div.bloco2").next("div.slick").slickNext();
$("div.solucao").hide();
});
$("#wrapper div.bloco2").find("li.prevslide").on('pointerdown', function() {
$(this).closest("div.bloco2").next("div.slick").slickPrev();
$("div.solucao").hide();
});
/*---------------------SUBMENU----------------------*/
$("#nav4 a").on('pointerdown', function(){
$("ul.submenu").slideToggle();
});
/*-----------------------AUDIO-----------------------*/
$("#nav6").on('pointerdown', function(){
var audio = $(".home_audio");
audio.toggleClass("audio_on");
if(audio.hasClass("audio_on")) {
audio.trigger("play");
}
else {
audio.trigger("pause");
}
});
/*----------------- VERIFICAR ACERTOS -------------*/
function verificarAcertos(){
var cont = 0;
$('#wrapper div.radio').find("input[type='radio']").each(function() {
if($(this).is(':checked') && $(this).hasClass("correct_answer")){
$(this).next('label').css("color", "#022954").css("font-weight", "bold");
cont++;
$(this).closest("div.option").closest("div.radio").find("input[type='radio']").attr("disabled", true);
}
else if($(this).is(':checked') && !($(this).hasClass("correct_answer"))){
$(this).next('label').css("color", "red").addClass("label2");
$(this).attr("disabled", true);
}
});
$("#wrapper p.counting").text(cont);
}
我注意到 .attr() 大大降低了 iPad 的速度。访问属性的方式必须与其他方式不同,否则我的动画会非常流畅。
我很幸运地保留了一个包含值的单独数组并循环遍历这些值。
注释掉 .attr() 行并重试动画。