Urgent Help required in background color

Hello everyone I need a simple help i.e. I want to set the background transparent in the function search over the internet but my issued was not resolved.
Here is the variable defaultBgColor : '#e5e5e5' which i want it as transparent/none or reset

here is the function code

                    var settings = {


                        animMouseenter        : {
                            'mText' : {speed : 350, easing : 'easeOutExpo', delay : 140, dir : 1},
                            'sText' : {speed : 350, easing : 'easeOutExpo', delay : 0, dir : 1},
                            'icon'  : {speed : 350, easing : 'easeOutExpo', delay : 280, dir : 1}
                        },

                        animMouseleave        : {
                            'mText' : {speed : 300, easing : 'easeInExpo', delay : 140, dir : 1},
                            'sText' : {speed : 300, easing : 'easeInExpo', delay : 280, dir : 1},
                            'icon'  : {speed : 300, easing : 'easeInExpo', delay : 0, dir : 1}
                        },

                        boxAnimSpeed        : 300,
                        defaultTextColor    : '#001e35',
                        [B]defaultBgColor        : '#e5e5e5'[/B]
                    };

Code (markup):

 

any help regarding this please

 

What will happen if you comment this line
//defaultBgColor : '#e5e5e5'
or keeping the value blank
defaultBgColor : ''

Can you try and tell

 

not working with the both solutionsss

 

Try none - if it's using background property in css, it should work then.

 

I already tried but nothing happend
I want to set the default backgournd color to transparent but getting white color when i set it to transparent
please check the line 26 ( defaultBgColor: '#e5e5e5') and 143 ( backgroundColor: settings.defaultBgColor ) of my code and please fix it for me please thanksss

(function($) {
    
    var methods = {
            init     : function( options ) {
                
                if( this.length ) {
                    
                    var settings = {
                        // configuration for the mouseenter event
                        animMouseenter        : {
                            'mText' : {speed : 350, easing : 'easeOutExpo', delay : 140, dir : 1},
                            'sText' : {speed : 350, easing : 'easeOutExpo', delay : 0, dir : 1},
                            'icon'  : {speed : 350, easing : 'easeOutExpo', delay : 280, dir : 1}
                        },
                        // configuration for the mouseleave event
                        animMouseleave        : {
                            'mText' : {speed : 300, easing : 'easeInExpo', delay : 140, dir : 1},
                            'sText' : {speed : 300, easing : 'easeInExpo', delay : 280, dir : 1},
                            'icon'  : {speed : 300, easing : 'easeInExpo', delay : 0, dir : 1}
                        },
                        // speed for the item bg color animation
                        boxAnimSpeed        : 300,
                        // default text color (same defined in the css)
                        defaultTextColor    : '#001e35',
                        // default bg color (same defined in the css)
                        defaultBgColor        : '#e5e5e5'
                    };
                    
                    return this.each(function() {
                        
                        // if options exist, lets merge them with our default settings
                        if ( options ) {
                            $.extend( settings, options );
                        }
                        
                        var $el             = $(this),
                            // the menu items
                            $menuItems        = $el.children('li'),
                            // save max delay time for mouseleave anim parameters
                        maxdelay    = Math.max( settings.animMouseleave['mText'].speed + settings.animMouseleave['mText'].delay ,
                                                settings.animMouseleave['sText'].speed + settings.animMouseleave['sText'].delay ,
                                                settings.animMouseleave['icon'].speed + settings.animMouseleave['icon'].delay
                                              ),
                            // timeout for the mouseenter event
                            // lets us move the mouse quickly over the items,
                            // without triggering the mouseenter event
                            t_mouseenter;
                        
                        // save default top values for the moving elements:
                        // the elements that animate inside each menu item
                        $menuItems.find('.sti-item').each(function() {
                            var $el    = $(this);
                            $el.data('deftop', $el.position().top);
                        });
                        
                        // ************** Events *************
                        // mouseenter event for each menu item
                        $menuItems.bind('mouseenter', function(e) {
                            
                            clearTimeout(t_mouseenter);
                            
                            var $item        = $(this),
                                $wrapper    = $item.children('a'),
                                wrapper_h    = $wrapper.height(),
                                // the elements that animate inside this menu item
                                $movingItems= $wrapper.find('.sti-item'),
                                // the color that the texts will have on hover
                                hovercolor    = $item.data('hovercolor');
                            
                            t_mouseenter    = setTimeout(function() {
                                // indicates the item is on hover state
                                $item.addClass('sti-current');
                                
                                $movingItems.each(function(i) {
                                    var $item            = $(this),
                                        item_sti_type    = $item.data('type'),
                                        speed            = settings.animMouseenter[item_sti_type].speed,
                                        easing            = settings.animMouseenter[item_sti_type].easing,
                                        delay            = settings.animMouseenter[item_sti_type].delay,
                                        dir                = settings.animMouseenter[item_sti_type].dir,
                                        // if dir is 1 the item moves downwards
                                        // if -1 then upwards
                                        style            = {'top' : -dir * wrapper_h + 'px'};
                                    
                                    if( item_sti_type === 'icon' ) {
                                        // this sets another bg image for the icon
                                        style.backgroundPosition    = 'bottom left';
                                    } else {
                                        style.color                    = hovercolor;
                                    }
                                    // we hide the icon, move it up or down, and then show it
                                    $item.hide().css(style).show();
                                    clearTimeout($item.data('time_anim'));
                                    $item.data('time_anim',
                                        setTimeout(function() {
                                            // now animate each item to its default tops
                                            // each item will animate with a delay specified in the options
                                            $item.stop(true)
                                                 .animate({top : $item.data('deftop') + 'px'}, speed, easing);
                                        }, delay)
                                    );
                                });
                                // animate the bg color of the item
                                $wrapper.stop(true).animate({
                                    backgroundColor: settings.defaultTextColor
                                }, settings.boxAnimSpeed );
                            
                            }, 100);    

                        })
                        // mouseleave event for each menu item
                        .bind('mouseleave', function(e) {
                            
                            clearTimeout(t_mouseenter);
                            
                            var $item        = $(this),
                                $wrapper    = $item.children('a'),
                                wrapper_h    = $wrapper.height(),
                                $movingItems= $wrapper.find('.sti-item');
                            
                            if(!$item.hasClass('sti-current')) 
                                return false;        
                            
                            $item.removeClass('sti-current');
                            
                            $movingItems.each(function(i) {
                                var $item            = $(this),
                                    item_sti_type    = $item.data('type'),
                                    speed            = settings.animMouseleave[item_sti_type].speed,
                                    easing            = settings.animMouseleave[item_sti_type].easing,
                                    delay            = settings.animMouseleave[item_sti_type].delay,
                                    dir                = settings.animMouseleave[item_sti_type].dir;
                                
                                clearTimeout($item.data('time_anim'));
                                
                                setTimeout(function() {
                                    
                                    $item.stop(true).animate({'top' : -dir * wrapper_h + 'px'}, speed, easing, function() {
                                        
                                        if( delay + speed === maxdelay ) {
                                            
                                            $wrapper.stop(true).animate({
                                                backgroundColor: settings.defaultBgColor
                                            }, settings.boxAnimSpeed );
                                            
                                            $movingItems.each(function(i) {
                                                var $el                = $(this),
                                                    style            = {'top' : $el.data('deftop') + 'px'};
                                                
                                                if( $el.data('type') === 'icon' ) {
                                                    style.backgroundPosition    = 'top left';
                                                } else {
                                                    style.color                    = settings.defaultTextColor;
                                                }
                                                
                                                $el.hide().css(style).show();
                                            });
                                            
                                        }
                                    });
                                }, delay);
                            });
                        });
                        
                    });
                }
            }
        };
    
    $.fn.iconmenu = function(method) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.iconmenu' );
        }
    };
    
})(jQuery);

Code (markup):

 

Try replacing the lines at 142-144. I haven't tested it myself though!

// animate the bg color of the item
$wrapper.stop(true).animate({
	"background-color": "transparent"
}, settings.boxAnimSpeed );

Code (markup):

 

thanks but not transparent but only white

 

You're probably getting the color of it's container -- do you have it live? Poke around at it with firebug or dragonfly to figure out what element the white is coming from, it could be something else in your CSS. you change both those lines to 'transparent' you SHOULD be getting transparency... if you are not, it's probably something around/under the input causing your headaches.

But again, this is why snippets don't give us enough of the picture, and results in a nasty case of "this is why we can't help you".

Though that much dicking around with style in javascript looks an awful lot like using js to do CSS' job, but that's par for the course when "jquery for nothing" is involved.

 

Okay, but is there any way to use verticale gredient colors as a backgoround if so the what will be the solution

 

any solution?