Tag: slidetoggle

如何在slideToggle函数中更多/更少地更改div高度

我怎样才能更新我的代码，所以我可以用slideToggle()更改 高度，现在它几乎是正确的， 但是当我点击一个”read_more”并点击另一个时它就不对了。 我需要什么时候slideDown显示隐藏的p并将主 更改为特定高度，何时是slideUp隐藏此p并更改 之前的特定高度（ “… Read More” base .main height， “… Read Less”新的。 .main高度”。 请参阅下面的演示或代码。 HTML Lorem ipsum dolor sit amet Ut enim ad minim veniam, quis nostrud exercitation. Duis aute irure dolor in reprehenderit in voluptate. … Read More Consectetur adipisicing elit On the other hand, we denounce with righteous. Gemoralized by […]

jQuery slideToggle和CSS border-radius propery show在IE10中连线

我正在使用MVC4，在我的页面中我使用了4个div和所有div。 我有JSFiddle URL来检查我的确切问题。 的jsfiddle 请仅在IE10中运行，因为在IE10或任何其他浏览器下它工作正常。 jQuery(document).ready(function () { jQuery(“.HomeContent”).hide(); jQuery(“.HomeDivHeading”).click(function () { jQuery(this).next(“.HomeContent”).slideToggle(250); }); }); 在IE10中，当我向下滑动时，它会像这样显示出来 我想解决这个问题，当我向下滑动它看起来像有线，并在一段时间后显示自动纠正。 请让我知道如何解决这个问题….

在完成执行之前获取jquery的slideToggle（）的最终高度 – 在CSS中没有固定的高度

我需要在我的网站上使用div B根据另一个div A的运行时间更改高度动态更新。 div A使用jquery slideToggle() [在div A几个div上]，但div B应该只是改变（同时）以匹配div A的当前高度。 panel_toggle1和panel1包含在div A ： $(document).ready(function () { $(“#panel_toggle1”).click(function () { $(“#panel1”).slideToggle(“slow”, function () { var divAheight = $(“#divA”).height(); $(“#divB”).animate({ height: divAheight }, “slow”); }); }); }); 上面的代码确实基本上是我想要的，但是，由于callback() ，它等待slideToggle()完成之前对另一个div执行幻灯片效果（我被迫这样做因为sliteToggle()不吐超出div A的最终height()直到它完成）。 有没有办法做到这一点，以便div A和div B平滑更新？ 即有没有办法获得高度slideToggle()将在它完成之前更新div A （这样我就可以在div B上同时在div B上调用.animate() ）？ 注意：我没有为CSS中的任何div使用固定高度，我想保持简单 或者 ，有没有一种方法可以保持div B以匹配div A的高度与CSS？

使用.slidetoggle使div在页面加载时再次展开和折叠

嗨伙计们，我有一个文本的div框，隐藏，直到你点击一个按钮，然后它.slideToggles打开到它的高度，然后当你再次点击它切换关闭。 现在我要做的是在页面加载框中展开然后再次折叠并停止（不自动重复），以便人们看到隐藏的内容并单击按钮。 有人能帮忙吗？？ 我对jQuery并不陌生。 这就是我所拥有的。 $(document).ready(function() { $(“#page-information”).hide(); $(“.info-tab”).toggle(function() { $(“.info-tab”).addClass(“info-active”); }, function () { $(this).removeClass(“info-active”); }); $(“.info-tab”).click(function() { $(“#page-information”).slideToggle(‘slow’); }); }); 任何帮助将不胜感激。 我以为你可以在开始的时候背靠背做两个滑动眼镜，但不是很明显。 多谢你们。

单击按钮情况切换页脚

我已经研究了一个星期左右，我有一个有效但不太好的解决方案。 我有一个隐藏的页脚，上面有一个像按钮一样的标签。 单击此按钮后，我的页脚将向上滑动并同时按下该按钮。 我的问题来自于我无法将我的按钮放在页脚内。 由于页脚被隐藏直到被点击，因此该按钮也将被隐藏。 我尝试过的一种方法是隐藏页脚而不是隐藏页脚，我将其放在bottom以隐藏它直到被点击。 这个效果很好但是一旦点击它就可以向下滚动，之后就不会被隐藏了。 然后我决定隐藏/显示它，但这是按钮发生问题的地方。 由于页脚被隐藏，我无法将按钮放在页脚内。 由于按钮位于他的页脚之外，我试图为它设置动画，但它不会同时制作动画，这非常奇怪。 我做的最终解决方案是使用css3缓动，但它仍然不完美甚至可用，因为它是如何不刷新的。 我试图在准确的时间制作两个动画，同时看起来好像它们是一个对象。 这是我的HTML Open Footer 这是我的CSS footer { position: absolute; display: none; left: 0; bottom: 0; width: 100%; height: 20%; background: rgba(0, 0, 0, 0.69); } .fTab { width: 15%; height: 4em; position: absolute; bottom: 0; left: 2em; display: block; background: rgba(0, 0, 0, 0.69); […]

slideToggle从右到左

我这样看了一个教程但我看不到任何选项让它从右侧到左侧工作。 我不想把它连在身体的右侧。 链接到小提琴

jQuery，切换div，CSS间距问题

我有这个标记： content content 通过jQuery，我正在做一个.slideToggle来显示/隐藏顶部div。 我希望在两个div之间始终有10px空间，无论是折叠还是扩展。 然而，当顶部div向下滑动时，行为仍然保持10px余量，但是一旦顶部div完成滑动，10px边距消失。 这或许似乎是一个利润率崩溃的问题。 我想出的解决方案是这样的： content   content ＆nbsp; 是关键因为需要在div中内容来“分离”两者并保留10px的保证金。 我尝试了.clearfix：after方法，但是在这种情况下不起作用，所以这可能是一个以jQuery为中心的问题。 有没有人碰到这个并找到比额外div更优雅的解决方案？

将slideToggle与min-height成功结合使用

我目前在我的网站顶部有一个很好的隐藏部分，点击后向下滑动。 使用slideToggle动画效果很好，但我也喜欢div至少覆盖窗口高度。 我已设法将窗口高度设置为变量并更改css以反映这一点，但将其与slideToggle组合会使动画变得浑浊。 jQuery(document).ready(function($) { var win = $(window).height(); $(“#hidden”).css(“min-height”, win); $(“a#toggle”).click(function() { var txt = $(“#hidden”).is(‘:visible’) ? ‘Show’ : ‘Hide’; $(“#toggle”).text(txt); $(“#hidden”).slideToggle(500); }); }); 这是一个小提琴http://jsfiddle.net/HZACf/ 如果删除jQuery的前两行，它会正常滑动。 谢谢你的帮助！

第二张幻灯片等待第一张幻灯片完成

第二张幻灯片等待第一次幻灯片放映完成这个FIDDLE 想象一下，如果我必须在一个页面中有四个幻灯片：幻灯片显示一个，幻灯片显示两个，幻灯片显示三个，幻灯片显示四个。 所有幻灯片的包装器具有相同的类并且没有ID，并且幻灯片显示使用相同的脚本运行： 实际上，只有一个幻灯片（第一个）将在页面中显示，而其余的仍然是隐藏的。 如果仅点击引用第二张幻灯片的第二个链接，则第二张幻灯片将显示在页面中，同时第一张幻灯片将自动隐藏。 如果在加载页面后立即通过单击其链接在包装器DIV中显示第二个幻灯片，则第二个幻灯片显示为空白且没有内容。 它的空白问题是因为第二张幻灯片正在等待第一张幻灯片完成滑动其中的所有内容。 这是我的HTML代码： 这是我用来运行所有幻灯片的脚本 ： var $el = $(‘.bigandsmall’), // SETUP //////// F = 600 , // Fade Time P = 5000 , // Pause Time C = 0 , // Counter / Start Slide# (0 based) /////////////////// $sl = $(‘.bigPicture > div’), $th = $(‘.smallPicture > img’), N = […]

Jquery为三级菜单设置动画

我正在使用hover动画构建一个包含三个级别的菜单。 这是我菜单的JSFIDLE 我的目标： 1 – 当用户将鼠标hover在主菜单上时，我想设置第二级动画并淡化所有链接内容。 当用户离开标题部分时。 我想淡出链接内容和顶部滑动第二个菜单级别。 注意：我想删除队列效果。 2 – 当第二级可见（链接）时，如果用户点击了about / contact部分，我将使用正确的内容滑动第三级菜单。 注意：第二个菜单级别必须保持可见。 如果用户点击关闭按钮，我将关闭第三级 3 – 在任何时候，如果用户离开标题区域，首先我需要淡出所有文本，然后滑动第二和第三个菜单。 任何帮助将非常感激=）谢谢 HTML： sunshineoktest ABOUT CONTACT “ABOUT CONTENT CONTACT CONTENT 我的JS： jQuery(“header”).hover(function() { jQuery(“#slidding-header-menu”).slideToggle(); jQuery(“#about”).click(function() { jQuery(“#slidding-about-contact-content”).slideToggle(); }); });