Fatal编程技术网
  • javascript/
  • Javascript jQuery幻灯片有点神经质

Javascript jQuery幻灯片有点神经质

javascript jquery

Javascript jQuery幻灯片有点神经质,javascript,jquery,Javascript,Jquery,我尝试使用jQuery的toggle函数滑入和滑出一个DIV，但结果总是在动画的开始和/或结束时跳跃。以下是我使用的js代码： $(document).ready(function(){ $('#link1').click( function() { $('#note_1').parent().slideToggle(5000); } ); 以及HTML： <div class="notice"> <p&

我尝试使用jQuery的toggle函数滑入和滑出一个DIV，但结果总是在动画的开始和/或结束时跳跃。以下是我使用的js代码：

$(document).ready(function(){
    $('#link1').click(
        function() {
            $('#note_1').parent().slideToggle(5000);
        }
);
以及HTML：

<div class="notice">
    <p>Here's some text. And more text. <span id="link1">Test1</span></p>
    <div class="wrapper">
        <div id="note_1">
            <p>Some content</p>
            <p>More blalba</p>
        </div>
    </div>
</div>
但这也不起作用，因为jQuery总是在动画结束时将溢出设置为可见。因此，DIV在动画结束时重新显示，但覆盖在其余内容上

我还尝试了UI.Slide（以及比例和大小）。它可以工作，但DIV下面的内容不会随动画移动。它仅在动画的结束/开始处跳跃以填充间隙。我不想那样

更新：

解决方案的一部分是在任何操作之前动态设置容器DIV的高度。这解决了一个跳跃问题。但这并不是边际崩溃的唯一原因。代码如下：

var parent_div = $("#note_1").parent();
parent_div.css("height", parent_div.height()+"px");
parent_div.hide();
第二次更新：

您可以在此页面上看到jQuery自己的站点上的bug（示例B）：

第三次更新：

使用jQuery 1.4进行了尝试，没有更多机会：-（

尝试从所有元素中删除所有CSS边距。通常，动画框架不考虑边距会产生不稳定的动画。

您可以使用animate方法编写自定义动画。这将使您能够绝对控制所有细节。

如果没有doctype，您可以尝试添加doctype在我发现这个建议后，他在IE8上为我辩护：。他建议了一个严格的DTD，但我只是使用了google.com使用的doctype：
，它解决了我的问题。

你只需修改effects.js中的向上和向下效果，让它们考虑可能存在的边距或填充，然后调整它们认为是t的内容元素的总大小，以适应这些值…沿这些线的某个值

Effect.BlindDown = function(element) {
  element = $(element);
  var elementDimensions = element.getDimensions();

//below*
  var paddingtop = parseInt(element.getStyle('padding-top'));
  var paddingbottom = parseInt(element.getStyle('padding-bottom'));
  var totalPadding = paddingtop + paddingbottom;

  if(totalPadding > 0)
  {
   elementDimensions.height = (elementDimensions.height - totalPadding);
  }
//above*

  return new Effect.Scale(element, 100, Object.extend({
    scaleContent: false,
    scaleX: false,
    scaleFrom: 0,
    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
    restoreAfterFinish: true,
    afterSetup: function(effect) {
      effect.element.makeClipping().setStyle({height: '0px'}).show();
    },
    afterFinishInternal: function(effect) {
      effect.element.undoClipping();
    }
  }, arguments[1] || { }));
};
解决方案是滑动div必须以像素为单位设置宽度。不要使用“auto”或“%”。这样会有很好的结果！问题在于滑动div中的内联元素

但是，如果它们在px中有宽度，那么高度将是相同的。试试看。

我注意到，如果在容器
之后有一个

，动画也会不稳定。删除此项解决了我的问题。

我花了几天时间才找到解决方案。问题是当元素被隐藏时，jquery得到了t他选择了错误的高度。top fix它你必须在隐藏之前获得该高度，并使用自定义动画达到该高度。这很棘手。我的导航标签中的div也存在“jerkynes”问题-我的目标是在div悬停时显示无序列表（如果存在）。我的列表是动态创建的，因此它们没有固定值

解决办法如下：

$("nav div").hover(
  function() { // i.e. onmouseover function

    /****simple lines to fix a % based height to a px based height****/
    var h = jQuery(this).find("ul").height(); //find the height
    jQuery(this).find("ul").css("height", h); 
                         //set the css height value to this fixed value
    /*****************************************************************/

    jQuery(this).find("ul").slideDown("500");
  },
  function(){ // i.e. onmouseout function
    jQuery(this).find("ul").slideUp("500");
  });
});
我发现始终有效的方法是设置一个不可见的1px边框：

边框：1px实心透明；

无需固定宽度、高度或其他任何内容，动画不会跳转。万岁！

尝试将容器的“位置”属性（在本例中为.notice div）设置为“相对”

为我工作。
来源：

在我的例子中，我通过添加
style=“空白：nowrap；”解决了这个问题
添加到元素以防止jQuery函数计算错误；除非需要换行，否则无需设置固定宽度。

确保没有在全局或容器或任何包含的元素上设置CSS转换规则。这也会导致抖动。

我今天遇到了这个问题。但是我注意到禁用所有CSS解决了这个问题。我也知道它以前工作得很好，所以一定是最近的变化导致了这个问题

事实证明，我使用CSS中的转换来轻松地进出悬停

一旦从元素中删除了这些转换，我添加的所有内容都很好

因此，如果存在相同的问题，只需将以下行添加到要添加的元素中：

-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
（我可能有点滥用转换，不仅仅是将它们添加到我想要转换的元素中，而是将它们用于整个网站。）

今天遇到了这个问题，看到了这个问题，并开始根据我在这里看到的内容进行修补。我通过从包含div的CSS中删除position:relative解决了我们的棘手问题。之后就不再奇怪了。我的2美分。

我发现animate（）是在jQuery中制作任何动画最可靠的方法（至少是跨浏览器）

这将动态地将内容包装到一个div中，然后使用该div包装的内部内容的高度来设置该div包装高度的动画

$（'a'）。单击（函数（事件）{
event.preventDefault（）；
xToggleHeight（$（this.next（））；
});
//对于每个可折叠元素。
$（'.collapsable'）。每个（函数（）{
//环绕一个div并设置为隐藏。
$（此）.wrap（“”）；
});
函数xToggleHeight（el）{
//获取内容的高度，包括任何边距。
var contentHeight=el.children（'.collapsable'）.outerHeight（true）；
//如果元素当前已展开。
如果（el.hasClass（“扩展”））{
//崩溃
el.removeClass（“扩展”）
.stop（）.animate（{height:0}，5000，
函数（）{
//完全崩溃
//设置为“隐藏”，使内容不可见。
$（this.css（{'overflow'：'hidden'，'visibility'：'hidden'）；
}
);
}否则{
//扩展
el.addClass（“扩展”）.css（{'overflow'：''visibility'：'visibility'}）
.stop（）.animate（{height:contentHeight}，5000，
函数（）{
//关于扩展完备
//将“高度”设置为“自动”，以防随后调整浏览器/内容的大小。
$（this.css（'height'，''）；
}

-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;



$('a').click(function(event) {
        event.preventDefault();
        xToggleHeight($(this).next());
});

//For each collapsible element.
$('.collapsible').each(function() {
        //Wrap a div around and set to hidden.
        $(this).wrap('<div style="height:0;overflow:hidden;visibility:hidden;"/>');
});

function xToggleHeight(el){
        //Get the height of the content including any margins.
        var contentHeight = el.children('.collapsible').outerHeight(true);
        //If the element is currently expanded.
        if(el.hasClass("expanded")){
                //Collapse
                el.removeClass("expanded")
                        .stop().animate({height:0},5000,
                        function(){
                                //on collapse complete
                                //Set to hidden so content is invisible.
                                $(this).css({'overflow':'hidden', 'visibility':'hidden'});
                        }
                );
        }else{
                //Expand
                el.addClass("expanded").css({'overflow':'', 'visibility':'visible'})
                        .stop().animate({height: contentHeight},5000,
                        function(){
                                //on expanded complete
                                //Set height to auto incase browser/content is resized afterwards.
                                $(this).css('height','');
                        }
                );
        }
}



$('#content').hide().delay(500).slideDown(500); 



<div>
   <p>Text</p>
</div>
<div class="hidden">
   <p></p>
</div>



<ul id="foo">
   <li>
      <h2>Click Me 1</h2>
      <div class="bar">Content To Toggle Here 1</div>
   </li>
   <li>
      <h2>Click Me 2</h2>
      <div class="bar">Content To Toggle Here 2</div>
   </li>
</ul>



#foo>li>div.bar {transition: all 0.5s;
   overflow: hidden;}



$('#foo h2').each(function(){
   var bar = $(this).siblings('.bar');
   bar.attr('data-height', bar.height()); //figure out the height first
   bar.css('max-height', '0px'); //then close vertically
});
$('#foo h2').click(function(){
   var bar = $(this).siblings('.bar');
   if ( bar .css('max-height') == '0px' ){ //if closed (then open)
      bar.css('max-height', bar.data('height') + 'px');
   } else { //must be open (so close)
      bar.css('max-height', '0px');
   }
});



  <div class="notice">
     <p>Here's some text. And more text. <span id="link1">Test1</span></p>
     <div class="wrapper" style="padding: 0">
        <div id="note_1" style="padding: 20px">
           <p>Some content</p>
           <p>More blalba</p>
        </div>
     </div>
   </div>



* {
    transition: all .3s;
}