用jQuery手風琴滑塊插件編寫計算

Question

我正在嘗試編寫用於制作手風琴的jQuery插件。

容器內的所有物品都需要減小其寬度，以便所有物品都可以顯示在一行上。

在懸停項目上，其余項目應減小寬度，以便可以將懸停項目顯示為其原始寬度。

嘗試初始設置項目時發生錯誤：最后一個項目消失。 數學是：

slider-width / all-items-width

接着：

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

我算錯了什么？

jQuery(function($) {

$.fn.shadeAccordion = function(elmwrap, sliderH) {

var $this = $(this), //get the slider countiner
  SlideR = $this,
  SliderWidth = SlideR.width(), // slider should inherit parent witdth
  thumbA = SlideR.find('a'), // images should wrap with a tag
  thumbMOunt = thumbA.length, // count the 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 the specific hoverd container
    imgWid = $this.data('orginalwidht'), //actual image width for this 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 over

$.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 and 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 so they will super fit to the 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 so they will super fit to the slider
    widhtS += Math.round(imgW * margineach);
    console.log(Math.round(widhtS));
  })
  .mouseover(function() {
    $(this).HoverAnimation(SliderWidth)
  })
  .mouseleave(function() {
    $(this).LeaveAnimation(SliderWidth)
  });

}

 });

這是一個演示： https : //jsfiddle.net/12345/8zd9nmvf/23/

Answer 1

問題是CSS-我正在計算所有圖像的寬度，然后寬度變為自動。

所以我在計算之前將css屬性上移了，並且它固定了：

//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;