jQuery slideUp 动画显示更多内容
Posted
技术标签:
【中文标题】jQuery slideUp 动画显示更多内容【英文标题】：jQuery slideUp animation to reveal more content 【发布时间】：2012-03-12 01:21:00 【问题描述】：我在自学 jquery 似乎是在从事这个项目的时候。
我认为有一种非常简单的方法可以实现这种技术，但我搜索了高低，没有运气。这是我们正在查看的页面：
http://igs.link-networkonline.com/campaign-landing-page/
中间的三个上拉菜单就是我们正在查看的内容。他们快完成了，我只需要帮助修复一些错误。
当标签向上滑动时，标签下方的 div 会向下滑动。这很可能是因为我使用负定位来增加菜单...我不知道还能做什么！
如果一个是打开的，当你点击另一个时，第一个会关闭。
这些问题非常接近完成，它们只是没有按照用户期望的方式运行，而且代码变得相当庞大，无法保留在标题中。
我现在遇到的问题：
一个。当一个打开而第一个已经打开时，它会关闭第一个，但是底部 div 使用的负边距增加太多，导致底部 div 干扰上述内容。
b.在最初的打开/关闭切换后，需要点击 2 次才能切换，导致页面感觉崩溃。
更新代码：
$(function()
$(".first").toggle(function()
$(".first").animate('height': '295px', 'top': "-220px");
$('.first img').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
$(".second").animate('height': '75px', 'top': "0px");
$(".third").animate('height': '75px', 'top': "0px");
$(".campaign-lower").animate('margin-top': '-220px');
$(".form").animate('margin-top': '-220px');
, function()
$(".first").animate('height': '75px', 'top': "0px", 'overflow': "hidden");
$('.first img').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
$(".campaign-lower").animate('margin-top': '0px')
$(".form").animate('margin-top': '0px');
);
$(".second").toggle(function()
$(".second").animate('height': '275px', 'top': "-200px");
$('.second img').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
$(".first").animate('height': '75px', 'top': "0px");
$(".third").animate('height': '75px', 'top': "0px");
$(".campaign-lower").animate('margin-top': '-200px');
$(".form").animate('margin-top': '-200px');
, function()
$(".second").animate('height': '75px', 'top': "0px");
$('.second img').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
$(".campaign-lower").animate('margin-top': '0px');
$(".form").animate('margin-top': '0px');
);
$(".third").toggle(function()
$(".third").animate('height': '255px', 'top': "-180px");
$('.third img').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
$(".first").animate('height': '75px', 'top': "0px");
$(".second").animate('height': '75px', 'top': "0px");
$(".campaign-lower").animate('margin-top': '-180px');
$(".form").animate('margin-top': '-180px');
, function()
$(".third").animate('height': '75px', 'top': "0px");
$('.third img').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
$(".campaign-lower").animate('margin-top': '0px');
$(".form").animate('margin-top': '0px');
);
);
非常感谢任何想法或方向。提前感谢您的知识！
【问题讨论】：
【参考方案1】：一个简单的方法是制作动画，例如.first 上的 .second 和 .third 点击关闭，动画 .first 和 .third 关闭 .second 点击等等...
您可以使用以下方式更改图像：
$('.first img').attr('src','new_source.png');
编辑：
底部框将保留此动画： 请注意，这是解决此问题的一种非常不优雅的方法，但它确实有效：
$(".first").toggle(function()
$(".first").animate('height': '270px', 'top': "-220px");
$(".second").animate('height': '50px', 'top': "0px");
$(".third").animate('height': '50px', 'top': "0px");
$("#bottom").animate('margin-top': '-220px');
, function()
$(".first").animate('height': '50px', 'top': "0px");
$("#bottom").animate('margin-top': '0px');
);
编辑 2：
这应该适合你了：
var first = false;
var second = false;
var third = false;
$(".first").click(function()
if(!first)
first = true;
second = false;
third = false;
$(".second").css('margin-bottom': '0px');
$(".third").css('margin-bottom': '0px');
$(".first").animate('height': '295px', 'top': "-270px",function()
$(".first").css('margin-bottom': '-220px');
);
$(".second").animate('height': '75px', 'top': "-58px");
$(".third").animate('height': '75px', 'top': "-58px");
$("img.button1").animate('top': "-235px");
$("img.button2").animate('top': "-25px");
$("img.button3").animate('top': "-25px");
$('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
$('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
$('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
else if(first)
first = false;
second = false;
third = false;
$(".first").css('margin-bottom': '0px');
$(".first").animate('height': '75px', 'top': "-58px");
$("img.button1").animate('top': "-25px");
$('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
);
$(".second").click(function()
if(!second)
first = false;
second = true;
third = false;
$(".first").css('margin-bottom': '0px');
$(".third").css('margin-bottom': '0px');
$(".second").animate('height': '295px', 'top': "-270px",function()
$(".first").css('margin-bottom': '0px');
$(".second").css('margin-bottom': '-220px');
$(".third").css('margin-bottom': '0px');
);
$(".first").animate('height': '75px', 'top': "-58px");
$(".third").animate('height': '75px', 'top': "-58px");
$("img.button2").animate('top': "-240px");
$("img.button1").animate('top': "-25px");
$("img.button3").animate('top': "-25px");
$('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
$('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
$('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
else if(second)
first = false;
second = false;
third = false;
$(".second").css('margin-bottom': '0px');
$(".second").animate('height': '75px', 'top': "-58px");
$("img.button2").animate('top': "-25px");
$('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
$("body").animate('padding-bottom': '0px');
);
$(".third").click(function()
if(!third)
first = false;
second = false;
third = true;
$(".first").css('margin-bottom': '0px');
$(".second").css('margin-bottom': '0px');
$(".third").animate('height': '295px', 'top': "-270px",function()
$(".third").css('margin-bottom': '-220px');
);
$(".second").animate('height': '75px', 'top': "-58px");
$(".first").animate('height': '75px', 'top': "-58px");
$("img.button3").animate('top': "-210px");
$("img.button1").animate('top': "-25px");
$("img.button2").animate('top': "-25px");
$('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
$('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
$('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
else if(third)
first = false;
second = false;
third = false;
$(".third").css('margin-bottom': '0px');
$(".third").animate('height': '75px', 'top': "-58px");
$("img.button3").animate('top': "-25px");
$('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
$("body").animate('padding-bottom': '0px');
);
请注意，这不是真正解决此类问题的方法，但它确实有效..
【讨论】：
太好了，感谢您的意见。我已经检查了列表中的 #2 :) #3 也应该适用于$('.first img').attr('src','downarrow.png'); .. 我会用#1 更新你:)
嘿，现在这么近了！非常感谢您的帮助。我遇到的唯一问题是，如果您在另一个打开时打开一个，底部 div 会向上滑动一点并干扰内容框。无论如何，在.first 开放时，延迟.second 和.third 直到.first 完全关闭才开放？谢谢1
玩过之后现在应该对你有用（查看编辑后的答案）:) .. 请接受我的回答:) 谢谢！
我刚刚将此代码应用到页面上，但一切都停止了工作......这里发生了什么？以上是关于jQuery slideUp 动画显示更多内容的主要内容，如果未能解决你的问题，请参考以下文章
[ jquery 效果 slideDown([speed,[easing],[fn]]) slideUp([speed,[easing],[fn]]) ] 此方法用于滑动显示隐藏的被选元素:动画效果只