Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » jQuery » Помогите добавить эффект затухания в готовый скрипт

Помогите добавить эффект затухания в готовый скрипт


     22.06.2014    js    Все вопросы » jQuery    2622

вопрос
Кто разбирается в js, можете в этот скрипт добавить/изменить эффект на затухание.
p.s. меня интересует fade эффект.


(function($) {
          
    $.fn.easyPaginate = function(options){

        var defaults = {
            step: 5,
            delay: 30,
            numeric: true,
            nextprev: false,
            auto:true,
            loop:true,
            pause:8000,
            clickstop:false,
            controls: 'pagination',
            current: 'current',
            randomstart: false
        };
        
        var options = $.extend(defaults, options);
        var step = options.step;
        var lower, upper;
        var children = $(this).children();
        var count = children.length;
        var obj, next, prev;
        var pages = Math.floor(count/step);
        var page = (options.randomstart) ? Math.floor(Math.random()*pages)+1 : 1;
        var timeout;
        var clicked = false;
        
        function show(){
            clearTimeout(timeout);
            lower = ((page-1) * step);
            upper = lower+step;
            $(children).each(function(i){
                var child = $(this);
                child.hide();
                if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); }
                if(options.nextprev){
                    if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); };
                    if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); };
                };
            });    
            $('li','#'+ options.controls).removeClass(options.current);
            $('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current);
            
            if(options.auto){
                if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pause); };
            };
        };
        
        function auto(){
            if(options.loop) if(upper >= count){ page=0; show(); }
            if(upper < count){ page++; show(); }
        };
        
        this.each(function(){
            
            obj = this;
            
            if(count>step){
            
                if((count/step) > pages) pages++;
                
                var ol = $('<ol id="'+ options.controls +'"></ol>').insertAfter(obj);
                
                if(options.nextprev){
                    prev = $('<li class="prev">Previous</li>')
                        .hide()
                        .appendTo(ol)
                        .click(function(){
                            clicked = true;
                            page--;
                            show();
                        });
                };
                
                if(options.numeric){
                    for(var i=1;i<=pages;i++){
                    $('<li data-index="'+ i +'">'+ i +'</li>')
                        .appendTo(ol)
                        .click(function(){    
                            clicked = true;
                            page = $(this).attr('data-index');
                            show();
                        });
                    };
                };
                
                if(options.nextprev){
                    next = $('<li class="next">Next</li>')
                        .hide()
                        .appendTo(ol)
                        .click(function(){
                            clicked = true;
                            page++;
                            show();
                        });
                };
            
                show();
            };
        });
        
    };

})(jQuery);

Ответа пока нет


1 комментарий

vitnet
PHP-developer

vitnet - 22 июня 2014 21:32 -

fade js effect jquery fade

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

$(selector).fadeIn(speed,callback);

.. child.fadeIn('fast')

.. child.fadeIn('slow')

if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); }
if(options.nextprev) {
if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); };
if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); };
};

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх