Question

我正在制作一个滑块插件。它可以在Firefox中运行，但在Chrome，IE和Safari中，而不是向左移动动画上升，而不是减小宽度，它会降低高度。 http://htc1swallpapers.zxq.net/jquery.squares.html

HTML和CSS

<div id="container"></div>


 #container{
     position:relative;
     width: 854px;
     height: 418px;
     margin: 100px;
     border: 3px solid #333;
     overflow: hidden;
 }
 .bar{
     position: absolute;
     top: 0;
     opacity: 0;
 }



$(document).ready(function() {
    $('#container').myplugin({sw: 60, sh: 60, animation: 'vertical'});
//  setTimeout(function(){$('#container').myplugin({sw: 60, sh: 60, animation: 'horizontal'});}, 15000);
});

jQuery插件

// JavaScript Document
(function($){
    $.fn.extend({

        myplugin: function(settings){

            var defaults = {
                speed: 200,
                easing: 'fadeout',
                animation: 'vertical',
                sw: 20, //slice width
                sh: 20, //slice height
                images: 1           
            }

            var settings = $.extend(defaults, settings);

            return $(this).each(function(){

                var opt = settings,
                    cont = $(this),
                    width = cont.innerWidth(),
                    height = cont.innerHeight(),
                    arr = [],
                    hc = Math.ceil(width/opt.sw), //horizontal slices count
                    vc = Math.ceil(height/opt.sh); //vertical slices count


                if(opt.animation === 'vertical'){
                    var loaded = false;
                    cont.empty();
                    for(v = 0; v < vc; v++){
                        for(h = 0; h < hc; h++){
                            if(v == 1) cont.append('<div class="bar" id="bar' + h + '"></div>');
                            var slices = {
                                src: '<img class="square" id="slice' + h.toString() + v.toString() + '" src="shred/squares/img1' + v.toString() + h.toString() + '.jpg"/>',
                                x: h * opt.sw, //offset left
                                y: v * opt.sh, //offset top
                                id: h.toString() + v.toString()
                            }
                            arr.push(slices);
                        }

                    }


                    $.each(arr, function(index, value){
                        for(d = 0; d < hc; d++){
                            if(arr[index].x == d * opt.sw){
                                cont.find('#bar' + d).append(arr[index].src);
                                cont.find('#slice' + arr[index].id).css({'top': arr[index].y, 'left': 0});
                            }
                            loaded = (d == hc -1) ? true : false;
                        }
                    });

                    if(loaded){
                        $('.bar').css({'width': opt.sw, 'height': vc * opt.sh, 'overflow': 'hidden', 'top': 0, 'left': width + opt.sh});

                        function slidein(h, del){setTimeout(function(){
                            cont.find('#bar' + h).stop().animate({
                            'left': h * opt.sw, 
                            'opacity': 1}, opt.speed*10)}, del + 2000);
                        }

                        function slideout(h, del){setTimeout(function(){
                            cont.find('div#bar' + h).stop().animate({
                                'width': 0,
                                'opacity': 0}, opt.speed*6)}, 10000 - h * 100);
                        }

                        for(h = 0; h < hc; h++){
                            var del = h * opt.speed;
                            slidein(h, del);
                            slideout(h, del);
                        }
                    }

                }

            });
        }
    })
})(jQuery);

Answer 1

看起来每个循环之外的loaded永远不会被调用。如果我修改这样的代码，我可以让它在chrome中工作：

$.each(arr, function(index, value){
    for(d = 0; d < hc; d++){
        if(arr[index].x == d * opt.sw){
            cont.find('#bar' + d).append(arr[index].src);
            cont.find('#slice' + arr[index].id).css({'top': arr[index].y, 'left': 0});
        }
        loaded = (d == hc -1) ? true : false;

        if(loaded){
            $('.bar').css({'width': opt.sw, 'height': vc * opt.sh, 'overflow': 'hidden', 'top': 0, 'left': width + opt.sh});

            function slidein(h, del){setTimeout(function(){
                cont.find('#bar' + h).stop().animate({
                'left': h * opt.sw, 
                'opacity': 1}, opt.speed*10)}, del + 2000);
            }

            function slideout(h, del){setTimeout(function(){
                cont.find('div#bar' + h).stop().animate({
                    'width': 0,
                    'opacity': 0}, opt.speed*6)}, 10000 - h * 100);
            }

            for(h = 0; h < hc; h++){
                var del = h * opt.speed;
                slidein(h, del);
                slideout(h, del);
            }
        }
    }
});

jQuery动画在Firefox中有效，但在其他浏览器中不起作用

1 个答案: