I am building my portfolio and I want to create a gallery to display my projects. I have a selection of seven divs containing content that form a tabbed navigation-esque section of my website. As with other tabbed navigations, only one div containing content will be active at any one time. However, unlike other tabbed navigations, this one is controlled by PHP. If certain content (currently set to a file_exists function but will soon be MySQL controlled) is available, the div will be written into the navigation and the appropriate link will be displayed. If it is not, then the link will be hidden and the div will not be written. The files required are based on a $_GET call, and the files required vary depending on the string inside my $_GET variable.
我正在构建我的投资组合,我想创建一个库来显示我的项目。我有七个div的选择,其中包含构成我网站的标签式导航区域的内容。与其他选项卡式导航一样,任何时候只有一个包含内容的div处于活动状态。但是,与其他选项卡式导航不同,这个导航由PHP控制。如果某些内容(当前设置为file_exists函数但很快将由MySQL控制)可用,则div将被写入导航并显示相应的链接。如果不是,则链接将被隐藏,并且不会写入div。所需的文件基于$ _GET调用,所需的文件因我的$ _GET变量中的字符串而异。
Each tab has a unique id. Currently (since I am no Javascript expert), I have a "reset" option that sets the style of all named divs to a "hidden" style, before bringing my chosen div to a "visible" state.
每个标签都有一个唯一的ID。目前(因为我不是Javascript专家),我有一个“重置”选项,在将我选择的div置于“可见”状态之前,将所有命名div的样式设置为“隐藏”样式。
What I want to do, if it is possible, is this:
如果有可能,我想做的是:
I want to go from #div1 to #div2. Divs 1, 2, 4 and 6 (for this example) are active. I click the link that tells my page to display #div2 (the function currently only says to hide ALL divs and then display #div2, the hiding of all other divs is a separate function, which is called within this function). #div1 is currently visible.
我想从#div1到#div2。 Div 1,2,4和6(对于此示例)处于活动状态。我点击告诉我的页面的链接显示#div2(该函数目前只说隐藏所有div然后显示#div2,所有其他div的隐藏是一个单独的函数,在此函数中调用)。 #div1目前可见。
- #div1 will fade out
- #div2 will fade in
#div1将淡出
#div2会淡入
Divs 4 and 6 will not be affected. Divs 3, 5 and 7 will not be touched since they (as far as my page is concerned) do not exist. Each fade can take 3 seconds for this example.
4和6分区不会受到影响。不会触及Div 3,5和7,因为它们(就我的页面而言)不存在。对于此示例,每个淡入淡出可能需要3秒。
I am vaguely aware that $('#div2').fadeIn(3000); would constitute a fade in effect for #div2 and the fadeOut() counterpart would constitute a fade out. How do I use jQuery (I have 1.5.2 on my site) to fade #div1 out and fade #div2 in WITHOUT affecting any other div, or is it easier to keep the code as it is where it hides all of my divs and just fade #div2 in? Please remember, I am not a Javascript expert, I'm barely a beginner, so please do not insult the length of my script or my inability to understand something which I guess would be so simple.
我隐约知道$('#div2')。fadeIn(3000);对#div2构成淡入效果,而fadeOut()对应则构成淡出。我如何使用jQuery(我的网站上有1.5.2)淡出#div1 out和fade#div2 in WITHOUT影响任何其他div,或者更容易保存代码,因为它隐藏了所有我的div和只是淡出#div2 in?请记住,我不是Javascript专家,我只是初学者,所以请不要侮辱我的脚本长度或无法理解我认为会如此简单的事情。
Please remember that I have up to seven divs in my navigation. The script must find the div that is visible based on the link that is clicked and fade it out, then fade in my chosen div, and it must not touch any of the remaining divs.
请记住,我的导航中最多有七个div。脚本必须根据点击的链接找到可见的div并将其淡出,然后淡入我选择的div,并且它不得触及任何剩余的div。
Is that easy enough to understand and gain an answer?
这很容易理解并获得答案吗?
EDIT @ 01:46 GMT, 30/04/2010
Thanks, but these don't look like what I want. They look like they would work if there were only two divs, but remember, there are up to seven, and the link should know which div is visible and which are not accounted for.
谢谢,但这些看起来不像我想要的。如果只有两个div,它们看起来会起作用,但请记住,最多有七个,并且链接应该知道哪个div是可见的,哪些不被占用。
I currently have my PHP script to say "If this file exists, then make this div and apply the style 'visibleTab' to it. Otherwise, make it, but apply the style 'hiddenTab' to it." My Javascript (now jQuery) code is as follows:
目前,我有我的PHP脚本说“如果这个文件存在,那么让这个div和风格‘visibleTab’适用于它。否则,请它,但风格‘hiddenTab’适用于它。”我的Javascript(现在是jQuery)代码如下:
function resetTabs() {
$("#postersandprint").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#mobileapp").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#stylesheets").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#storyboards").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#motionpieces").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#interactives").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#developmentwork").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
}
function showTab(tabname) {
resetTabs();
$('#'+tabname).fadeIn(3000);
$("#"+tabname).removeClass("hiddenTab").addClass("tabs visibleTab");
}
The principle is this:
原则是这样的:
My link has an onclick that calls my showTab function and places the appropriate div id inside the function, so for example:
我的链接有一个调用我的showTab函数的onclick,并在函数中放置了相应的div id,例如:
<a href="javascript:;" onclick="showTab('mobileapp');">Link</a>
The function hides all of the divs and then fades in the one called by 'tabname', in this case, "mobileapp".
该函数隐藏所有div,然后在'tabname'调用的div中淡入,在本例中为“mobileapp”。
I have told each reset function to remove any class called 'hiddenTab' as well as any class called 'visibleTab' and 'tabs' before adding the 'hiddenTab' class as a kind of "fail safe" approach. I have also told my showTab function to explicitly remove the "hiddenTab" class from my tab that I want visible and to add the classes "tabs" and "visibleTab". I forget why I have two styles, but i am sure the reason will come to me.
我已经告诉每个重置函数删除任何名为'hiddenTab'的类以及任何名为'visibleTab'和'tabs'的类,然后将'hiddenTab'类添加为一种“故障安全”方法。我还告诉我的showTab函数,从我想要显示的选项卡中显式删除“hiddenTab”类,并添加类“tabs”和“visibleTab”。我忘了为什么我有两种款式,但我相信原因会来找我。
I want my jQuery script to know which div is visible and which one is not out of the selection of seven. The #div1 and #div2 was an example, but it could be any div from the selection. Before, when I used the document.getElementById function, it worked perfectly, I just wanted to add a fade on to the script to make it look better. Now, it works, but only when I cycle through the divs once. Afterwards, it just appends my div underneath the visible one, it doesn't hide them. I know I have missed something, or I have messed up somewhere, but what have I missed? Where have I messed up?
我希望我的jQuery脚本知道哪个div是可见的,哪个不是七个选择。 #div1和#div2是一个例子,但它可以是选择中的任何div。之前,当我使用document.getElementById函数时,它工作得很好,我只想在脚本上添加淡入淡出以使其看起来更好。现在,它可以工作,但只有当我循环通过div一次。之后,它只是将我的div添加到可见的div下面,它不会隐藏它们。我知道我错过了什么,或者我搞砸了某个地方,但是我错过了什么?我搞砸了哪里?
5 个解决方案
#1
2
While not set up in tabs hopefully this jsfiddle example will help you a bit. [Edit, added total 4 divs now, wait for animation to finish before clicking the next button]
虽然没有在选项卡中设置,但希望这个jsfiddle示例可以帮助你一点。 [编辑,现在共添加4个div,等待动画完成后点击下一个按钮]
Basically it searches the container div for an element that is visible using the :visible selector
基本上它在容器div中搜索使用:visible选择器可见的元素
The .eq(0) says to only grab the first visible element out of the collection the selector returns. If there are no visible elements it just selects the first element.
.eq(0)表示只捕获选择器返回的集合中的第一个可见元素。如果没有可见元素,则只选择第一个元素。
Then it selects the id to show.
然后它选择要显示的ID。
Calls out both animations at the same time with:
通过以下方式同时调出两个动画:
vis.fadeOut(speed);
next.fadeIn(speed);
If you want to wait for one to fade out before fading the next in use the callback mentioned in the other answers.
如果你想在淡出下一个使用之前等待一个淡出,那么在其他答案中提到的回调。
This works fine on all new-ish browsers but chokes a bit on IE7 or less.
这适用于所有新的浏览器,但在IE7或更低版本上有点窒息。
Alternatively you can get a collection of hidden elements with :hidden
或者,您可以获取隐藏元素的集合:hidden
If you want a more direct example you can post your html so that we could help with the exact selectors that are best suited.
如果你想要一个更直接的例子,你可以发布你的html,这样我们就可以帮助你选择最合适的选择器。
#2
1
Maybe this is what you want?
也许这就是你想要的?
$('#div1').fadeOut('3000', function() {
$('#div2').fadeIn();
});
#3
0
When you call the any of the jQuery effect functions, one of the parameters is a callback function which is called when the animation is complete. You simply need to do something like this
当您调用任何jQuery效果函数时,其中一个参数是一个回调函数,在动画完成时调用该函数。你只需要做这样的事情
$("#div1").fadeOut(1000, function(){
$("#div2").fadeIn(1000);
});
Here is a walkthough
这是一个散步
$("#div1").fadeOut(1000, function(){
This says that when the div with an id of "div1" will face out for 1000 milliseconds (1 second) and after it will call the function.
这表示当id为“div1”的div将面向1000毫秒(1秒)并且在它将调用该函数之后。
$("#div2").fadeIn(1000);
This simply makes you new idea fade in after the other one has completely finished fading out.
这简单地让你的新想法在另一个完全淡出之后淡入。
});
Simply closes up everything that we opened.
只需关闭我们打开的所有内容。
I think what you are worried about is that
我觉得你担心的是那个
$("div").fadeOut(1000);
Would fade out all divs on the page but putting a hash mark and an id you can identify a specific one my it's id like "#div1"
将淡出页面上的所有div,但是添加一个哈希标记和一个id你可以识别一个特定的一个我的id就像“#div1”
Also, you set it with the id attribute:
此外,您使用id属性设置它:
<div id = "div1"></div>
#4
0
I found this jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig - http://bit.ly/NgLRdb give it a look, seems pretty useful....
我发现这个jShowOff:Erik Kallevig的jQuery Content Rotator插件 - http://bit.ly/NgLRdb给它一个看,看起来非常实用....
currently trying to put it as a module on my joomla site
目前正试图将其作为我的joomla网站上的模块
#5
0
$("#button").click(function()
{
$("#div1").fadeOut("fast");
$("#div2").fadeIn("slow");
});
This code will work as button clicks which will fade out div1 and then slowly fade in an another div as div2.
这段代码将作为按钮点击工作,淡出div1然后慢慢淡入另一个div作为div2。
#1
2
While not set up in tabs hopefully this jsfiddle example will help you a bit. [Edit, added total 4 divs now, wait for animation to finish before clicking the next button]
虽然没有在选项卡中设置,但希望这个jsfiddle示例可以帮助你一点。 [编辑,现在共添加4个div,等待动画完成后点击下一个按钮]
Basically it searches the container div for an element that is visible using the :visible selector
基本上它在容器div中搜索使用:visible选择器可见的元素
The .eq(0) says to only grab the first visible element out of the collection the selector returns. If there are no visible elements it just selects the first element.
.eq(0)表示只捕获选择器返回的集合中的第一个可见元素。如果没有可见元素,则只选择第一个元素。
Then it selects the id to show.
然后它选择要显示的ID。
Calls out both animations at the same time with:
通过以下方式同时调出两个动画:
vis.fadeOut(speed);
next.fadeIn(speed);
If you want to wait for one to fade out before fading the next in use the callback mentioned in the other answers.
如果你想在淡出下一个使用之前等待一个淡出,那么在其他答案中提到的回调。
This works fine on all new-ish browsers but chokes a bit on IE7 or less.
这适用于所有新的浏览器,但在IE7或更低版本上有点窒息。
Alternatively you can get a collection of hidden elements with :hidden
或者,您可以获取隐藏元素的集合:hidden
If you want a more direct example you can post your html so that we could help with the exact selectors that are best suited.
如果你想要一个更直接的例子,你可以发布你的html,这样我们就可以帮助你选择最合适的选择器。
#2
1
Maybe this is what you want?
也许这就是你想要的?
$('#div1').fadeOut('3000', function() {
$('#div2').fadeIn();
});
#3
0
When you call the any of the jQuery effect functions, one of the parameters is a callback function which is called when the animation is complete. You simply need to do something like this
当您调用任何jQuery效果函数时,其中一个参数是一个回调函数,在动画完成时调用该函数。你只需要做这样的事情
$("#div1").fadeOut(1000, function(){
$("#div2").fadeIn(1000);
});
Here is a walkthough
这是一个散步
$("#div1").fadeOut(1000, function(){
This says that when the div with an id of "div1" will face out for 1000 milliseconds (1 second) and after it will call the function.
这表示当id为“div1”的div将面向1000毫秒(1秒)并且在它将调用该函数之后。
$("#div2").fadeIn(1000);
This simply makes you new idea fade in after the other one has completely finished fading out.
这简单地让你的新想法在另一个完全淡出之后淡入。
});
Simply closes up everything that we opened.
只需关闭我们打开的所有内容。
I think what you are worried about is that
我觉得你担心的是那个
$("div").fadeOut(1000);
Would fade out all divs on the page but putting a hash mark and an id you can identify a specific one my it's id like "#div1"
将淡出页面上的所有div,但是添加一个哈希标记和一个id你可以识别一个特定的一个我的id就像“#div1”
Also, you set it with the id attribute:
此外,您使用id属性设置它:
<div id = "div1"></div>
#4
0
I found this jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig - http://bit.ly/NgLRdb give it a look, seems pretty useful....
我发现这个jShowOff:Erik Kallevig的jQuery Content Rotator插件 - http://bit.ly/NgLRdb给它一个看,看起来非常实用....
currently trying to put it as a module on my joomla site
目前正试图将其作为我的joomla网站上的模块
#5
0
$("#button").click(function()
{
$("#div1").fadeOut("fast");
$("#div2").fadeIn("slow");
});
This code will work as button clicks which will fade out div1 and then slowly fade in an another div as div2.
这段代码将作为按钮点击工作,淡出div1然后慢慢淡入另一个div作为div2。