Question

我正在尝试让几个div对我的mouseOver和mouseOut作出反应。我正在尝试构建类似于Vimeo风格音量条的东西。

我得到了对mouseOver作出反应的条形图，但我希望它们在mouseOut之后返回到它们的原始高度。每个酒吧都有不同的高度。它在硬编码时有效，但我试图使用尽可能少的代码。

这是我的JQuery：

$(document).ready(function() {
var totalHeight = '100%';
var initHeight;

function getHeight(h) {
  initHeight = h;
  //alert(initHeight);
}

$("div#barWrap").children().mouseover(function() {
    // This is where I am having trouble. I want to get the original height of the bar so I can reuse it on mouseOut
    getHeight($("div#barWrap").children().css('height')); 
    // Animate bar
    $(this).animate({ height: totalHeight}, 100);
});

$("div#barWrap").children().mouseout(function() {
    $(this).animate({ height: initHeight}, 400);
});

}）;

非常感谢任何帮助。

Answer 1

将初始高度存储为每个元素的数据：

var totalHeight = '100%',
    $bwc = $('div#barWrap').children();

$bwc.each(function(i,el) {
    $(this).data('height', $(this).height());
});

$bwc.mouseover(function() {
    $(this).animate({ height: totalHeight}, 100);
});

$bwc.mouseout(function() {
    $(this).animate({ height: $(this).data('height') }, 400);
});

Answer 2

我会使用data（）函数来存储div的属性：http://api.jquery.com/jQuery.data/

Answer 3

如果您能够以现代浏览器为目标，另一种解决方案是使用CSS过渡。

Answer 4

将height:auto的一个div放入另一个overflow:hidden和height:0的div中，然后点击后，检查内部div的高度，并将其设置为外部。试试吧！

HTML：

<div id="visible-by-year" class="filter-visible">
    <div id="content"><br><br><br><br><br><br><br><br><br></div>
</div>

CSS：

.filter-visible{
background: gray;
height: 0;
#content{
    height: auto;
    position: relative;
}

}

JS

  $('.by-year').on('click', function() {
     //$('.visible-by-year').toggleClass('show-by-year')
     //
    // $('#visible-by-year').animate({ height: $("#visible-by-year").data('height') }, 400);
     var contentHeight = $('#content').height();
     $('#visible-by-year').animate({ height: contentHeight}, 500 );

     console.log(contentHeight);


 });

JQuery：将div返回初始高度

4 个答案: