I'm trying a simple jQuery script to fadeout one div and fadein another one in it's place but for some reason the first div never fades out. It's probably an obvious problem with the code but I cannot seem to make it out.
<style>
#cuerpo { display: none; }
</style>
<div id="cuerpo"></div>
<div id="inicio"></div>
<script>
function delayed() {
$("div").fadeIn(3000, function () {
$("cuerpo").fadeIn("slow");
});
}
$("a").click(function () {
$("inicio").fadeOut("slow");
setTimeout("delayed()",500);
});
</script>
How should I do it? What am I doing wrong?
UPDATE
The simplest way to do this is by using a callback:
$('a').click(function(){
$('#fadeout').fadeOut(300, function () {
$('#fadein').fadeIn(300);
});
});
then the HTML:
In/Out
<div id="fadeout">Fade Out</div>
<div id="fadein" style="display:none;">Fade In</div>
OLD:
There is a simple way to do this:
$('a').click(function(){
$('#fadeout').fadeOut(300);
$('#fadein').delay(400).fadeIn(300);
});
I think you can use callback...
$('#fadeout').fadeOut(300, function(){
$("#fadein").fadeIn(300);
});
this is the most stable way....
There is a syntax error
it should be
$("#inicio").fadeOut("slow");
and not
$("inicio").fadeOut("slow");
Similarly
$("#cuerpo").fadeIn("slow");
and not
$("cuerpo").fadeIn("slow");
Related
Here is my website at http://tylerfurby.com - I am trying to get this following click function to work:
$("#click").click(function() {
console.log('clicked on #click');
enterSite();
});
It seems do be doing nothing at the moment, here is the HTML:
<div class="interact">
<h2 id="click"><a class="enterSite">Click here to continue</a></h2>
</div>
<script type="text/javascript" src="script.js"></script>
</div>
And here is the function I am trying to have called within the click function:
var enterSite = function () {
$("#click").addClass('blur');
$("#click").animate({ left: "100%" }, 2000,'easeOutElastic', function() {
$(this).removeClass('blur')
});
}
Thanks for your time.
Your problem is a z-index problem. The #click is not receiving the event. Also, "click anywhere" should probably use $(window).on("click") instead.
Can anyone tell me why the $("#opening-first").fadeOut() line of this is not executing??
$(document).ready(function(){
$("#opening-first").fadeIn(1000).delay(1000, function() {
$("#opening-second").fadeIn(1000, function() {
$("#opening-first").fadeOut(1000, function() {
$("#body-overlay").delay(1000).fadeOut(1000);
});
});
});
});
It seems as if this should be pretty straightforward. Here's the HTML:
<div id="body-overlay">
<div class="centered">
<h1 id="opening-first">My name is Trevor Hinesley.</h1>
<p class="medium" id="opening-second">And I like creating.</p>
</div>
</div>
Your code is not working simply because of the first delay. You see, the second parameter of delay() should be a string for a queue name. You can reuse that queue name with the function stop() or any other method using a "queue" but it doesnt matter since it's not what you are doing here.
If you want to delay the second fadeIn, your code should look like that :
$("#opening-first").fadeIn(1000, function() {
$("#opening-second").delay(1000).fadeIn(1000, function() {
$("#opening-first").fadeOut(1000, function() {
$("#body-overlay").delay(1000).fadeOut(1000);
});
});
});
Fiddle : http://jsfiddle.net/rk4Bz/
I have a problem with the jquery fadeout. I tried to set 3000 Milliseconds but it won't apply
I use:
$('#alertSuccess').fadeOut('3000', function() {
document.getElementById("alertSuccess").style.display = "none";
});
but it still disappears very very fast ( i guess the default 400milli seconds)..
Anyone know why?
Try using this code:
html:
<div id="box1" class="box">linear</div>
Then use this script
$(document).ready(function() {
function complete() {
document.getElementById("alertSuccess").style.display = "none";
}
$("#box1").fadeOut(3000,complete);
});
you can check this code on http://jsfiddle.net/FLARH/
.fadeOut(3000, function() { ... }
I'm trying to use JQuery to have a method fire when the following code gets clicked:
<div class="content_sub_list">
<img src="/imgs/close-icon.jpg" class="exit_sub_list"/>
hello
</div>
It is not doing anything and my JQuery code looks like this:
$(document).ready(
function()
{
$('#my_accnt').click(
function()
{
$('.content_sub_list').css("display", "block");
$('.content_sub_list').css("margin-left", "4px");
$('.content_sub_list').html('<div class="sub_list_header">My A<img src="/imgs/close-icon.jpg" class="exit_sub_list"/></div><BR />text');
});
$('#my_queue').click(
function()
{
$('.content_sub_list').css("display", "block");
$('.content_sub_list').css("margin-left", "165px");
$('.content_sub_list').html('<div class="sub_list_header">My Q<img src="/imgs/close-icon.jpg" class="exit_sub_list"/></div><BR />text');
});
$('.exit_sub_list').click(
function()
{
alert("hi");
$('.content_sub_list').css("display", "none");
});
});
My header looks like this:
<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/mContentBar.js" type="text/javascript"></script>
Other functions work in it except this one? for some reason.
So what am I doing wrong, or how i can get this to work? Thanks
This is working for me. Make sure you have jQuery loaded properly. You can either place jquery.js after your html or wrap your jquery code with a document.ready function.
like
(function() {
$('.exit_sub_list').click(
function() {
alert("hi");
});
});
Check working example at http://jsfiddle.net/p6Q2d/
I would like to load a page inside a div with fadeTo effects.
I have created this function for that
function show(div) {
$("#showdata").fadeTo(300,0.0,function() {
$("#showdata")
.html('<img src="images/loading.gif" />')
.load('includes/show/'+div+'.inc.php')
.fadeTo(300,1.0);;
});
}
The fade from current contents to the image is ok,but after that ,the new contents pop all of a sudden .
I also tried this,but same results :
function show(div) {
$("#showdata").fadeTo(300,0.0,function() {
$("#showdata")
.html('<img src="images/loading.gif" />')
.load('includes/show/'+div+'.inc.php',$("#showdata").fadeTo(300,1.0));
});
}
You need to wrap your code for the .load() callback as an anonymous function like this:
function show(div) {
$("#showdata").fadeTo(300,0.0,function() {
$("#showdata").html('<img src="images/loading.gif" />')
.load('includes/show/'+div+'.inc.php', function() {
$(this).fadeTo(300,1.0)
});
});
}
I tried your code, and it seems to work as you intended. I had to increase the fade time from 300ms to 2000ms to see the fadein better.
The one problem you will have is the loading.gif not showing up. That is because you fade that element out, so you're not going to see anything there :)
edit: you can do something like this instead.
function show(div){
$("#showdata").fadeTo(2000,0.0,function() {
$("#showdata")
.parent().append('<img src="loading.gif" />') //add the image to the container, so you can see it still
.end().load('includes/show/'+div+'.inc.php', function(){
$("#showdata")
.parent().find('img').remove() //remove the image once the page is loaded.
.end().end().fadeTo(2000,1.0);
});
});
}
You would have to add a container div around #showdata.
<div>
<div id="#showdata">TEST</div>
</div>