Question

我现在遇到了这个问题。我有一个包含li-img（其中5个）的div，当我尝试使用slideDown动画3/10重新出现时，它在mozilla上平滑并且在11/11中镀铬。代码和计算机是相同的，确切的问题是滑动是平滑的，但是当div出现时图像不会减慢，有时是完全不可见的，然后突然出现。它不是asyc编码的问题因为我甚至尝试在追加和动画之间设置setTimeout（300）但是追加是同步的。 Mozilla中唯一的插件就是我的chrome中的ad-block。（我知道mozilla认为浏览器比较重，而Chrome认为速度更快但吃了更多的ram）。代码是这个（我真的不认为它的代码问题）

$(document).ready(function(){
//classes
var $wrapper= $(".wrapper");
var $header=$wrapper.find(".header");
var $center = $wrapper.find(".center");
var $quiz=$center.find(".quiz");
// buttons-li
var $header_li= $header.find("ul li");
//other elements
var $quiz=$wrapper.find(".quiz");
var $rope = $wrapper.find("#rope")
var $popup;
function getQuiz(){
    $.get('./php/get_quiz.php',function(data)
    {
        $quiz.append("<ul>"+data+"</ul>");
        //setTimeout(ropeAnimation,100);
        ropeAnimation();
        toImgsAddPointer();
        $rope.unbind('click');
        $rope.removeClass('pointer');
    });
}
function submitAnswer(){
    var id = $(this).attr("id");
    $.get('./php/result.php',{'choice':id},function(data){
        var $ul= $center.find("ul");
        $ul.remove();
        $quiz.append("<ul>"+data+"</ul>");
        toImgsAddPointer();
    });
}
function clickEvent(){
    var purple= '#5061FF';
    var white = 'white';
    var red= 'red';
    var black = 'black';
    $(this).css('background-color',purple).css('color',white);
    $(this).siblings().css('background-color',red).css('color',black);
    if(this.id==1){
        var div = "<div class='popup'><object data='./pdf/math1.pdf'></object></div";
    }else{
        var div = "<div class='popup'><object data='./pdf/math2.pdf'></object></div";
    }
    $wrapper.prepend(div);
    $popup=$(".popup");
    $popup.on('click',closePopup);
}
function closePopup(){
    $popup.remove();
}
function ropeAnimation(){
    $rope.animate({"height":'200px'},100);
    $quiz.slideDown(500);
    $rope.animate({"height":'50px'},700);
}
function toImgsAddPointer(){
    var $img = $quiz.find("li img");
    $img.addClass("pointer");
    $img.on('click',submitAnswer);
}
$header_li.on('click',clickEvent);
$header_li.addClass("pointer");
$rope.addClass("pointer");
$rope.on('click',getQuiz);
});

动画在get_quiz（）中，带有ropeanimation（）。

Mozilla Firefox使我的jquery slideDown动画变得迟钝

0 个答案: