1

我面临着一个 jQuery 难题,我很感激有人帮我解决它。

在加载完所有文本和图像后,我想使用 jQuery 淡入网页。所以我将正文样式内联设置为“display:none”,然后使用这个基本片段淡入正文:

<script type="text/javascript">
$(window).load(function() {
      $('body').fadeIn(300);
}); 
</script>

这正是我在 Firefox、Safari 和 Chrome 中想要的。然而,Internet Explorer 和 Opera 提出了一个挑战:当正文淡入时,页面中包含的所有 JQuery 库元素同时出现,而不是像在“普通”浏览器中那样旋转。

我在这里发布整个画廊脚本:

    /* Gallery */
jQuery.fn.gallery = function(_options){
    // defaults options 
    var _options = jQuery.extend({
        duration: 600,
        autoSlide: false,
        slideElement: 1,
        effect: false,
        fadeEl: 'ul',
        switcher: 'ul > li',
        disableBtn: false,
        next: 'a.link-next, a.btn-next, a.next',
        prev: 'a.link-prev, a.btn-prev, a.prev',
        circle: true
    },_options);

    return this.each(function(){
        var _hold = $(this);
        if (!_options.effect) var _speed = _options.duration;
        else var _speed = $.browser.msie ? 0 : _options.duration;
        var _timer = _options.autoSlide;
        var _sliderEl = _options.slideElement;
        var _wrap = _hold.find(_options.fadeEl);
        var _el = _hold.find(_options.switcher);
        var _next = _hold.find(_options.next);
        var _prev = _hold.find(_options.prev);
        var _count = _el.index(_el.filter(':last'));
        var _w = _el.outerWidth(true);
        var _wrapHolderW = Math.ceil(_wrap.parent().width()/_w);
        if (((_wrapHolderW-1)*_w + _w/2) > _wrap.parent().width()) _wrapHolderW--;
        if (_timer) var _t;
        var _active = _el.index(_el.filter('.active:eq(0)'));
        if (_active < 0) _active = 0;
        var _last = _active;
        if (!_options.effect) var rew = _count - _wrapHolderW + 1;
        else var rew = _count;

        if (!_options.effect) _wrap.css({marginLeft: -(_w * _active)});
        else {
            _wrap.css({opacity: 0}).removeClass('active').eq(_active).addClass('active').css({opacity: 1}).css('opacity', 'auto');
            _el.removeClass('active').eq(_active).addClass('active');
        }
        if (_options.disableBtn) {
            if (_count < _wrapHolderW) _next.addClass(_options.disableBtn);
            _prev.addClass(_options.disableBtn);
        }

        function fadeElement(){
            _wrap.eq(_last).animate({opacity:0}, {queue:false, duration: _speed});
            _wrap.removeClass('active').eq(_active).addClass('active').animate({
                opacity:1
            }, {queue:false, duration: _speed, complete: function(){
                $(this).css('opacity','auto');
            }});
            _el.removeClass('active').eq(_active).addClass('active');
            _last = _active;
        }
        function scrollEl(){
            _wrap.animate({marginLeft: -(_w * _active)}, {queue:false, duration: _speed});
        }
        function toPrepare(){
            if ((_active == rew) && _options.circle) _active = -_sliderEl;
            for (var i = 0; i < _sliderEl; i++){
                _active++;
                if (_active > rew) {
                    _active--;
                    if (_options.disableBtn &&(_count > _wrapHolderW)) _next.addClass(_options.disableBtn);
                }
            };
            if (_active == rew) if (_options.disableBtn &&(_count > _wrapHolderW)) _next.addClass(_options.disableBtn);
            if (!_options.effect) scrollEl();
            else fadeElement();
        }
        function runTimer(){
            _t = setInterval(function(){
                toPrepare();
            }, _timer);
        }
        _next.click(function(){
            if(_t) clearTimeout(_t);
            if (_options.disableBtn &&(_count > _wrapHolderW)) _prev.removeClass(_options.disableBtn);
            toPrepare();
            return false;
        });
        _prev.click(function(){
            if(_t) clearTimeout(_t);
            if (_options.disableBtn &&(_count > _wrapHolderW)) _next.removeClass(_options.disableBtn);
            if ((_active == 0) && _options.circle) _active = rew + _sliderEl;
            for (var i = 0; i < _sliderEl; i++){
                _active--;
                if (_active < 0) {
                    _active++;
                    if (_options.disableBtn &&(_count > _wrapHolderW)) _prev.addClass(_options.disableBtn);
                }
            };
            if (_active == 0) if (_options.disableBtn &&(_count > _wrapHolderW)) _prev.addClass(_options.disableBtn);
            if (!_options.effect) scrollEl();
            else fadeElement();
            return false;
        });
        if (_options.effect) _el.click(function(){
            _active = _el.index($(this));
            if(_t) clearTimeout(_t);
            fadeElement();
            return false;
        });
        if (_timer) runTimer();
    });
}

$(document).ready(function(){
    $('div#gallery').gallery({
        duration: 2000,
        effect: 'fade',
        fadeEl: 'ul.gall-inner > li',
        next: 'a#next-btn',
        prev: 'a#prev-btn',
        autoSlide: 6000,
        switcher: '.brands-list ul > li'
    });
});

一些知识渊博的人可以帮助我找到解决方案或解决方法吗?我将不胜感激!

4

0 回答 0