这是我的代码http://jsfiddle.net/AB6J3/7/你可以看,编辑等.
当我翻到红色边框时,橙色框应该向上滑动,当鼠标移出时它应该向下滑动.它适用于其他方式,但当我将slideDown更改为slideUp时,它不起作用:/我错过了什么？
欣赏有帮助.
<!DOCTYPE html>
<html>
<head>
<style>
div#monster { background:#de9a44; margin:3px; width:80px; height:40px; display:none; float:left; position:absolute; right:10px; top:0; }
#clickk {width:40px; height:40px; background:#ccc; position:absolute; top:0; right:10px;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div style="width:550px; padding:40px 0 0;margin:0 auto; border:1px solid #111; position:relative;">
<div id="monster"></div>
<div id="clickk"></div><br />
<div style="width:500px; height:300px; background-color:#ccc; margin:0 auto;"></div>
</div>
<script>
$("#clickk").hover(function () {
if ($("#monster").is(":hidden")) {
$("#monster").slideDown("fast");
} else {
$("#monster").slideUp("fast");
}
});
</script>
</body>
</html>?
似乎在调用后两个结果都是一样的.
HTML：
<a href="#" class="show_hide" data-content="toggle-text">Read More</a>
jQuery的：
// Slide Up Slide Down
$('.show_hide').toggle(function(){
$(this).text().replace("Read More", "Read Less");
$('.' + $(this).attr('data-content')).slideDown();
},function(){
$(this).text().replace("Read Less", "Read More");
$('.' + $(this).attr('data-content')).slideUp();
});
我正在尝试使其中的“更多/更少”按钮之一隐藏和显示文本。
如何在点击时将“阅读更多”替换为“阅读较少”？
非常感谢您的输入！
我怎样才能确保几个div被滑落？现在我有这个功能:
$("div#personal").click(function() {
$("div.1").slideUp("slow", function () { $("div.2").slideDown("slow") } );
});
我想要做的是确保所有命名的div:
除了第二个div之外,它被滑倒了.
我一直在尝试将slideDown()效果用于我正在处理的网站,但是我很难获得我想要的效果.这是一个示例,显示了我想要完成的任务.
<div>
blahblahblahblah
<span id="span_more" style="display:none">
blahblahblah
</span>
<a class="link_more" id="more">More…</a></div>
</div>
基本上,当单击"更多..."时,我希望当前隐藏的文本使用滑动效果显示,同时保持与可见文本末尾的内联.这似乎不可能使用slideDown(),因为它正在将显示更改为阻止.
非常感谢你.
我想在点击链接后滑动一个div,然后再滑动另一个div,然后转到下一页.
问题:在动画完成之前加载新页面.
问题:我该怎么办？
我应该使用preventDefault然后以某种方式恢复它吗？
这是URL:http://www.jolandaschouten.nl/wordpress
这是代码,现在只对第一个菜单项实现:
jQuery(document).ready(function($){
var allDivs = $("#introductie").add("#agenda").add("#werk").add("#onderwijs-organisatie").add("#publicaties").add("#links").add("#contact");
console.log(allDivs);
$("li.page-item-11 a").click(slideUp);
function slideUp(){
allDivs.slideUp(500, slideDown);
}
function slideDown(){
$("#introductie").slideDown(500);
}
});
ps:我不想使用AJAX,因为SEO和浏览器导航问题.点击应该真正导致进入下一页.
我有一个简单的手风琴菜单,我今天使用jQuery slideDown()和slideUp()方法放在一起.示例代码:
<h1>the header</h1>
<div class='thechild'>
the content
</div>
$(function(){
$('h1').click(function(){
var next = $(this).next();
if (next.is(':visible'))
{
next.stop().slideUp();
}
else
{
next.stop().slideDown();
}
return false;
});
});
这很有效,但是如果你<h1>在动画完成之前再次单击其中一个,那么你可以打破slideUp()或者slideDown()事件.似乎会发生的是,第二次单击时,它将slideUp()高度调零,但如果向下滑动,它将仅向下滑动到其最后一个最大高度 - 即高度.thechild是您最后一次中断动画的高度点击.
我需要的是,根据需要单击一次slideUp或slideDown .thechild,然后再单击一次以停止动画(如果正在运行)并向上滑动.thechild.随后的第三次单击应该向下滑动.thechild到它的全高,而不是在点击#2时中断时的高度.希望一切都有道理:)
我确定我曾经遇到过这个问题并以某种方式解决了它,但是不记得(或谷歌)我提出的解决方案.这仅仅是这些幻灯片方法的限制,并且是一种解决方法,可以animate()通过一些更高的工作来进行我自己的调用吗？
我试过玩你可以传入的各种布尔.stop(),但无济于事.必须有一些我想念的简单,有人能开导我吗？
jsfiddle:http://jsfiddle.net/cY6kX/
重新创建,双击<h1>多次并观察发生的情况,然后再单击几次以查看它将如何破坏,直到您重新加载页面.
任何指针都非常感激
我使用以下jQuery.div框向上滑动,然后在5秒后淡出.有没有办法实现这一点,因为它需要很长时间才能出现.
$(document).ready(function() {
$("#load_limit").slideUp(500); //have tried "fast" also
$("#load_limit").delay(5000);
$("#load_limit").slideDown(500);
});
我要做的是将视频保存在.slideDown中直到mouseout文本和视频,这可能吗？这是我的代码,直到现在
#text和#video都是div
JS在这里:
<script>
$(document).ready(function(){
$("#text").mouseover(function(){
$("#video").slideDown("slow");
});
$("#video").mouseout(function(){
$("#video").slideUp("slow");
});
});
</script>
CSS在这里:
#text
{
margin-top:20px;
float:center;
font:VNF-Museo;
font-size:40px;
color: #333;
margin-left:auto;
margin-right:auto;
}
#video
{
display:none;
width:1024px;
height:278px;
}
我找了一个解决方案,但找不到那些接近的东西.谢谢
有没有办法执行html(),只有在slideUp()完成后？
<p class="test">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tortor elit</p>
$(".test").slideUp().html("");
我尝试使用延迟和队列,但我失败了.