javascript - Calculation with jQuery accordion slider plugin writing -

i'm trying write jquery plugin making accordion.

all items inside container need reduce width items shown on 1 line.

on item hover, rest of items should reduce width hover item shown @ original width.

the error occurs when trying initial set items: last item disappears. math is:

slider-width / all-items-width 

and then:

each-item * (slider-width / all-items-width) 

what calculating wrong?

jquery(function($) {  $.fn.shadeaccordion = function(elmwrap, sliderh) {  var $this = $(this), //get slider countiner   slider = $this,   sliderwidth = slider.width(), // slider should inherit parent witdth   thumba = slider.find('a'), // images should wrap tag   thumbmount = thumba.length, // count number of images   thumbimg = thumba.find('img'); // find  acctual imgaes  var imgaeswidth = 0; thumbimg.each(function(index, el) {   imgaeswidth += $(el).width(); }); console.log(imgaeswidth); var margineach = sliderwidth / imgaeswidth; console.log(margineach);  //some css settigns slider.find(elmwrap).css({   'transition': 'width .2s ease-in',   'height': sliderh,   'overflow': 'hidden',   'position': 'static' }).find('img').css({   height: sliderh,   width: 'auto',   'position': 'relative',   'max-width': 'none' });;  $.fn.hoveranimation = function(sliderwidth) {   var $this = $(this), //get specific hoverd container     imgwid = $this.data('orginalwidht'), //actual image width cont     sliderwidthafteropen = sliderwidth - imgwid,     thumbimgsibdiv = $this.siblings(elmwrap);     var sibimgaeswidth = 0;   thumbimgsibdiv.each(function(index, el) {     sibimgaeswidth += $(el).width();   });   var margineachopend = sliderwidthafteropen / sibimgaeswidth;     $this.addclass('active').width(imgwid).css('opacity', '1');    thumbimgsibdiv.addclass('inactive').each(function() {     var thisw = $(this).width();     $(this).width(thisw * margineachopend).css('opacity', '0.4');   });  }; //end of mouse on  $.fn.leaveanimation = function(sliderwidth) {   var $this = $(this),     imgwid = $this.data('editedwidth');    $this.removeclass('active').width(imgwid);   slider.find(elmwrap).css('opacity', '0.4').not('.active').removeclass('inactive').each(function() {     $(this).width($(this).data('editedwidth'));   }); //end of each change margin  }; //end of mouseleave  widhts = 0; // adjust new width , declare animation when hover slider.find(elmwrap).each(function(idx, el) {     var imgw = $(el).find('img').width();      $(el).width(math.round(imgw * margineach)); //change images width super fit slider     $(el).attr('data-orginalwidht', imgw).attr('data-editedwidth', math.round(imgw * margineach)).find('img').css({       margin: '0',       padding: '0'     });     $(el).css({       'margin': 0,       'clear': 'none',       'padding': 0     }); //change images width super fit slider     widhts += math.round(imgw * margineach);     console.log(math.round(widhts));   })   .mouseover(function() {     $(this).hoveranimation(sliderwidth)   })   .mouseleave(function() {     $(this).leaveanimation(sliderwidth)   });  }   }); 

heres demo: https://jsfiddle.net/12345/8zd9nmvf/23/

the issue css - calculating images width before width became auto.

so moved css properties before calculation , fixed:

//some css settigns slider.find(elmwrap).css({   'transition': 'width .2s ease-in',   'height': sliderh,   'overflow': 'hidden',   'position': 'static' }).find('img').css({   height: sliderh,   width: 'auto',   'position': 'relative',   'max-width': 'none' });  var imgaeswidth = 0; thumbimg.each(function(index, el) {   imgaeswidth += $(el).width(); }); var margineach = sliderwidth / imgaeswidth;