我试图使用toggle,slideUp和slideDown来显示和隐藏一系列div.我能够将div转换为slideDown,但我无法将其转换为slideUp.我以前没有使用这个脚本,所以我真的很困惑为什么这不起作用.我已经包含了我的脚本和我试图显示和隐藏的div.
快速注意:当我在"隐藏的车辆"div中放置一个普通的旧p标签时,它工作正常.它显示和隐藏像它应该的那样.但是,当我把我的桌子放回那个div时,它没有用.
<script type="text/javascript">
$(document).ready(function() {
$(".ShowVehicles").toggle(function() {
$(".HiddenVehicles").slideDown(2000);
$(this).text("Hide All");
}, function () {
$(".HiddenVehicles").slideUp(2000);
$(this).text("Show All");
});
});
<div class="HiddenVehicles" style="display:none; width:730px;">
(there will be a giant table in here)
</div>
检查此代码:http://jsfiddle.net/ZXN4S/1/
HTML:
<div class="input">
<input type="text" size="50" id="test_input">
<input type="submit" value="send" id="test_submit">
</div>
<ul>
<li class="clear">
<div class="comment">
<div class="image">
<img src="http://www.chooseby.info/materiale/Alcantara-Black_granito_nero_naturale_lucido_3754.jpg">
</div>
<div class="info">
<div class="name">Name</div>
<div class="text">text</div>
<div class="timestamp">timestamp</div>
</div>
</div>
</li>
</ul>
jQuery的:
$(document).ready(function() {
$("#test_submit").click(function() {
$.post('/echo/json/', function(data) {
last = $("ul li:first-child");
new_line = last.clone();
new_line.hide();
last.before(new_line);
new_line.slideDown('slow');
});
return false;
});
});
如果您尝试在输入字段中插入一些文本并单击提交,您可以看到我正在谈论的问题.当它向下滑动时,滑块的高度是错误的,效果很难看.但如果你删除div info它运作良好.我该怎么办？
这有效,但我不知道为什么.在function capIn()我看来,线$botcap.slideDown("slow")应该滑下div.它将它滑起来.如果我尝试使用.slideUp()没有任何事情发生,好像它试图滑下来.任何人都可以向我解释这个吗？
$(".slide").hover(capIn, capOut);
function capIn(){
//slide top caption down
var $topcap = $(this).children(".topcap");
$topcap.slideDown("slow");
//slide bottom caption up
//!! Why does slideDown slide caption up here?
var $botcap = $(this).children(".botcap");
$botcap.slideDown("slow")
}
function capOut(){
//slide top back up
var $topcap = $(this).children(".topcap");
$topcap.slideUp("slow");
//slide bottom back down
var $botcap = $(this).children(".botcap");
$botcap.slideUp("slow");
}
这是我用来将新行推送到容器的一行代码:
this.$el.append(new ItemView(item).render().el);
其中item是Backbone.js的模型,render()创建和/或修改对象和el是html元素.(在渲染完成之前,对象永远不会显示)
我如何保持**new ItemView(item).render()并将其存储在变量中,然后淡入并将其滑入我的容器(底部)？
编辑
请记住,这this.$el是容器元素.
我正在创建一个网站,主页上有一个房子的图像.房子有几扇窗户和一扇门.当用户点击特定窗口时,<div>弹出一些文本.门具有相同的功能,只有我想要<div>弹出一个"向下滑动"效果,我希望它的位置<div>在门下.因此,<div>从门的位置向下滑动/展开.
我正在使用jQuery的slideDown()方法,但我得到的结果是'pop up div'从页面顶部向下滑动,而不是从<div>代表图像门的绝对定位.
我的代码片段发布在下面.
我怎样才能得到我正在寻找的结果？
<html>
<head>
<script src="JQuery/jquery-1.7.1.js"></script>
<script>
$('#door').click(function() {
$("#Poem").slideDown(3000);
});
</script>
</head>
<style type="text/css">
.main {
width:100%;
}
.mainContentBox {
width:900px;
height:55px;
margin:auto;
margin-top:15px;
}
#Poem {
width:285px;
height:350px;
background:#ffffcc;
border:1px solid #cccccc;
position:absolute;
z-index:5;
margin-top:435px;
margin-left:312px;
}
#Close {
position:absolute;
top:0px;
right:15px;
color:blue;
cursor:pointer;
background: url('PNG/close.png');
width:36px;
height:36px;
}
#HouseLogo {
width:900px;
height:721px;
margin:auto;
position:relative; …我有一个带有四个项目按钮的页面,当用户点击这些按钮时,内容应该是slideDown.
如果它已经是可见内容,则必须将该内容滑出,然后将正确的内容向下滑动.
一切正常,但如果用户在项目按钮之间快速点击,幻灯片就会卡住并开始出现在其他内容之上.
这是一个例子:http: //jsfiddle.net/7t6Eh/42/
如果用户点击项目之间的"慢",一切正常.
我已经尝试使用'.is(":visible")'但得到了相同的结果.
谁能帮我吗？
var active = 0;
$("#item1").click(function(){
if (active == 0){
$("#ContentList1").stop().slideToggle(function() {
active = 1;
});
} else {
if (active != 1){
$("#ContentList" + active).stop().slideToggle(function() {
$("#ContentList1").stop().slideToggle(function() {
active = 1;
});
});
}
}
});
$("#item2").click(function(){
if (active == 0){
$("#ContentList2").stop().slideToggle(function() {
active = 2;
});
} else {
if (active != 2){
$("#ContentList" + active).stop().slideToggle(function() {
$("#ContentList2").stop().slideToggle(function() {
active = 2;
});
});
}
}
}); …这不是因为某种原因而想要工作的.我只是试图html插入一些并div在点击链接时向下滑动.
我试图使用这个jQuery脚本,但也许有些不对劲.我想通过单击页面右侧的箭头使脚本工作.正如你从JavaScript代码和jsfiddle测试中看到的那样,我试图向下滑动隐藏的#top-bg.
JavaScript代码:
$(document).ready(function() {
$(".bottone").click(function() {
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
这是jsfiddle测试: TEST
我做错了什么？
我正在尝试使用标题和内容创建两个div,当我单击标题时,内容应该向上滑动以隐藏自身.
你可以在JSFiddle上找到我的代码.
我的HTML:
<div id="left-content">
<div class="news-block">
<div class="block-head">News membres</div>
<div class="block-content"></div>
</div>
<div class="news-block">
<div class="block-head">News premium & VIP</div>
<div class="block-content"></div>
</div>
</div>
我的JavaScript:
jQuery(document).ready(function($){
$('div.news-block').on('click', '.block-head', function(){
var content = $(this).parent().find('div.block-content');
if (content.is(':visible'))
content.slideUp("slow");
else
content.slideDown("slow");
});
});
我红了一些帖子说你不能在tbody上使用slideUp()作为例子,或者在浮动div上,但正如你所看到的,我的"内容"div不浮动,这就是为什么我不明白为什么它是不工作
你有什么主意吗 ？
谢谢.
jquery ×10
slidedown ×10
javascript ×4
slideup ×4
css ×2
backbone.js ×1
callback ×1
css-position ×1
fadein ×1
hover ×1
html ×1
menu ×1
render ×1
slidetoggle ×1
toggle ×1