I am using the following script to fade an image out after 5 seconds:
var $j = jQuery.noConflict();
$j(document).ready(function() {
var fade_out = function() {
$j("#fadeout").fadeOut().empty();
}
setTimeout(fade_out, 5000);
});
When the image goes away it just disappears. I want the image to slowly fade out over a second or so. How can I do this?
Put the empty method in the fadeOut callback:
var $j = jQuery.noConflict();
$j(document).ready(function() {
var fade_out = function() {
$j("#fadeout").fadeOut(1000, function() { $j("#fadeout").empty(); });
}
setTimeout(fade_out, 5000);
});
var el = $j("#fadeout");
el.fadeOut(1000, function() { el.empty(); })
1000 is the time in milliseconds taken by the effect to complete the fadeOut
You may want to cache a reference to the element (since you need to use it twice)
Related
I was wondering if I can make my div do something just to look more attractive . However , I want my div to fade in then go back normally automatically . I tried fade in for seconds with a function ,, but I need it to be back quickly . How can this be done ? Any help ? Thankyou
$(document).ready(function() {
window.setTimeout("fadeMyDiv();", 3000); //call fade in 3 seconds
}
)
function fadeMyDiv() {
$("#test").fadeOut('slow')
}
jQuery's fadeIn and fadeOut accept another parameter which is a callback function that get called when the fade in/out is done. You can use it like:
var $div = $("#test");
$div.fadeIn("slow", function() {
$div.fadeOut("slow");
});
And you can use delay to make a delay between the fade in and out:
$("#test").fadeIn("slow") // fade in
.delay(1000) // wait 1000 ms (1 second)
.fadeOut("slow"); // fade out
Loop forever:
var $div = $("#test");
setInterval(function() {
$div.fadeIn("slow", function() { $div.fadeOut("slow"); });
}, 2000);
I would like to alternate the contents of a div (or swap in a new div if better) every few seconds, with a fade in/out. Jquery prefered, or pure js fine too.
Based on Arun's solution, I have added the Jquery below, and it works perfectly... but how do I make it repeat?
HTML:
<div class="wrapper" style="height:100px">
<div id="quote1">I am a quote</div>
<div id="quote2">I am another quote</div>
<div id="quote3">I am yet another quote</div>
</div>
Javascript: (as per Arun in the comments)
jQuery(function () {
var $els = $('div[id^=quote]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
$els.eq(++i % len).fadeIn();
})
}, 2500)
})
Try
jQuery(function () {
var $els = $('div[id^=quote]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
i = (i + 1) % len
$els.eq(i).fadeIn();
})
}, 2500)
})
Demo: Fiddle
Here is a working example:
jQuery(function () {
var $els = $('div[id^=quote]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
i = (i + 1) % len
$els.eq(i).fadeIn();
})
}, 2500)
})
this sounds like a job for...a slider. There are a ton of jQuery plugin options out there,
I've always been a fan of Malsup
jQuery plugins by malsup
he even has responsive ones ready to go. Google "jQuery slider" to be overwhelmed with options.
Use a slider plugin there are lots on the internet. This is a simple snippet I wrote that works with any number of elements without having to change the javascript.
It's very easy to change.
http://jsfiddle.net/Ux9cD/39/
var count = 0;
$('.wrapper div').css('opacity', '0');
var varName = setInterval(function() {
//hide all the divs or set opacity to 0
$('.wrapper div').css('opacity', '0');
//get length
var length = $('.wrapper div').length;
//get first child:
var start = $('.wrapper div').eq(count);
if (count < length) {
animateThis(start,length,count);
count++;
} else {
console.log('end of list');
//restore back to hidden
//set count back to 0
$('.wrapper div').css('opacity', '0');
count = 0;
}
}, 2000);
varName;
function animateThis(start,length,count)
{
$( start ).animate({
opacity: 1
}, 1000, "linear", function() {
//return count++;
});
}
This will do it if you set your second and third divs to hidden:
window.setInterval(function(){
window.setTimeout(function(){
$('#quote1').fadeIn('slow').delay(3000).fadeOut('fast').delay(6000);
}, 0);
window.setTimeout(function(){
$('#quote2').fadeIn('slow').delay(3000).fadeOut('fast').delay(6000);
}, 3000);
window.setTimeout(function(){
$('#quote3').fadeIn('slow').delay(3000).fadeOut('fast').delay(6000);
}, 6000);
}, 3000);
It's not going to do exactly what you want because fading takes time, so two divs will be onscreen at the same time. I tried to remedy this by having them fadeIn() slowly and fadeOut() quickly, but I'd recommend taking out the fading altogether and just hiding them.
See demo.
Also, #ArunPJohny has a solution here that is a bit difficult to understand but does get rid of the fading delay problem. Alternatively, here's my no-fading solution.
HTML
<div id="div1">quote 1</div>
<div id="div2" style="display:none">quote 2</div>
JavaScript
i=0;
setInterval(function(){
if(i%2 == 0)
$('#div1').fadeOut('slow', function(){
$('#div2').fadeIn('slow')
})
else
$('#div2').fadeOut('slow', function(){
$('#div1').fadeIn('slow')
})
i++;
}, 2000)
Fiddle
Here is something you can try if you can do without fade in and fadeout. Just a simple few lines of java script no need to add any plugins etc.
Also look at this link Jquery delay it has sample with delay and fade in fadeout. May be you can tailor it to your needs.
Try in your browser
<html>
<head>
<script type="text/javascript">
function swapDiv(){
var firstString = document.getElementById("quote1").innerHTML;
var secondString = document.getElementById("quote2").innerHTML;
document.getElementById("quote1").innerHTML = secondString;
document.getElementById("quote2").innerHTML = firstString;
setTimeout(swapDiv, 3000);
}
setTimeout(swapDiv, 3000);
</script>
</head>
<body>
<div id="quote1">I am another quote</div><span>
<div id="quote2">I am yet another quote</div><span>
</body>
</html>
$('#test').hover(
function () {
$(this).append('Blah');
}
);
How can I make the jQuery repeatedly append Blah in #test based on how long you are hovering over #test?
For instance, how can I append Blah once every second you are hovering over #test?
You could use setInterval like this :
var myInterval = false;
$('#test').hover(
function(){
$that = $(this);
// need to save $(this) as 'this' will be different within setInterval
myInterval = setInterval(function(){
$that.append('Blah');
}, 100); // repeat every 100 ms
},function() {
clearInterval(myInterval); // clear the interval on hoverOut
}
);
Working example here
(function() {
var intv;
$('#test').hover(
function () {
var $this = $(this);
intv = setInterval(function() {
$this.append('Blah');
}, 1000);
},
function() {
clearInterval(intv);
}
);
}());
I've enclosed all the code inside a anonymous scoped function so to not pollute global scope, and I cached a reference to $(this) to avoid a new evaluation every second, inside the timeout
You can use setInterval to do so:
var appending; //var to store the interval
$('#test').hover(function(){ //on mouseenter
var $this = $(this); //store the context, i.e. the element triggering the hover
appending = setInterval(function(){ //the following function gets executed every second until the interval is cleared
$this.append('<p>Blah</p>'); //append content to context
},1000); //1000 meaning the repetition time in ms
},function(){ //on mouseleave
clearInterval(appending); //clear the interval on mouseleave
});
use setInterval()
$('#test').hover(
function () {
setInterval(function() {
$(this).append('Blah');
},1000)
}
);
I have a list of thumbnails. When I click on a thumbnail, I want the image to load after half a second. Here's my code:
$('ul#thumbs li img').click(function() {
setTimeout(function() {
$('img#image').attr("src", $(this).attr("src").replace("_thumb", ""));
}, 500);
});
When I click on one of the thumbs, nothing happens. If I remove the setTimeout function, and just have the image load immediately, it works fine.
Anybody know why the event wouldn't fire?
this isn't what you think it is. When you use setTimeout, this is no longer a reference to the current element when the function gets executed.
You'll need to make sure you are keeping track of the proper element, like so:
$('ul#thumbs li img').click(function() {
var thumbImg = this;
setTimeout(function() {
$('img#image').attr("src", $(thumbImg).attr("src").replace("_thumb", ""));
}, 500);
});
The problem is the scope of this in the timeout function try this:
$('ul#thumbs li img').click(function() {
var self = $(this);
setTimeout(function() {
$('img#image').attr("src", self.attr("src").replace("_thumb", ""));
}, 500);
});
Or even better this:
$('ul#thumbs li img').click(function() {
var src = $(this).attr("src").replace("_thumb", "");
setTimeout(function() {
$('img#image').attr("src", src);
}, 500);
});
I'm trying to create my own slideshow. The following code fades from one image to another. I'd like to cycle from img1.jpg to img4.jpg but i'm not sure how to pause after each change.
i++;
temp = "img"+i+".jpg";
$("#img").fadeOut(function() {
$(this).load(function() { $(this).fadeIn(); });
$(this).attr("src", temp);
});
UPDATE: I've changed the code to the following. On John Boker's advice i've renamed the images to img0, img1, img2, img3. It goes to the first, second, third image the just stops. Any ideas?
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
var temp="";
function slideshow(i)
{
temp = "img"+i+".jpg";
$("#img").fadeOut(function() {
$(this).load(function() {
$(this).fadeIn();
// set a timeout of 5 seconds to show the next image;
setTimeout(function(){ slideshow((i+1)%4); }, 5000);
});
$(this).attr("src", temp);
});
}
slideshow(0);
});
</script>
</head>
<body>
<img src="img1.jpg" id="img"/>
</body>
</html>
You can do it like this, using setInterval:
$(function() {
var i = 0;
// Four-second interval
setInterval(function() {
$("#img").fadeOut(function() {
$(this).attr("src", "img" + i++ % 4 + ".jpg");
$(this).fadeIn();
});
}, 4000);
}
I've simplified a few things that might have been causing some of the other problems you're seing, removing the (seemingly superfluous) call to load inside your fadeOut callback and eliminating the unnecessary temp variable.
(Finally, if you aren't just doing this to learn, consider using one of the many excellent slideshow plugins out there, like Cycle.)
you probably should have that inside a function:
// show image i
function slideshow(i)
{
temp = "img"+i+".jpg";
$("#img").fadeOut(function() {
$(this).load(function() {
$(this).fadeIn();
// set a timeout of 5 seconds to show the next image;
setTimeout(function(){ slideshow((i+1)%4); }, 5000);
});
$(this).attr("src", temp);
});
}
check out this example...
$(function(){
$('.slideshow img:gt(0)').hide();
setInterval(function(){$('.slideshow :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slideshow');}, 4000);
});
A fiddle
simply change the 4000 to 8000 in the script if you want to pause on each image for 8 seconds instead of 4 seconds.
Take a look at this jQuery slideshow question
set up window.setInterval(function, delay) to call a function at a set interval to execute the code that you have.
There are plenty of plugins that will already cycle images for you (unless the challenge is to write your own), one of my particular favourites is the cycle plugin.
One trick is use an animate a property of an element to its current value using a timer.
Eg
$("#img").fadeIn().show(3000).fadeOut();
Because $(this) is already visible, adding the .show(3000) means that element stays visible for 3s before fading out