This is my code:
$(document).ready(function() {
function ticker() {
$('#ticker li:first').slideUp(function() {
$(this).appendTo($('#ticker')).slideDown();
});
}
setInterval(function(){ ticker(); }, 3000);
});
I don't know how to stop the text scrolling when I place the mouse over a particular title.
DEMO
Use a hover() to clear the interval and when mouse leaves then again start the ticker like,
$(document).ready(function () {
function ticker() {
$('#ticker li:first').slideUp(function () {
$(this).appendTo($('#ticker')).slideDown();
});
}
var clr = null;
function animate(){
clr=setInterval(function () {
ticker();
}, 3000);
}
animate();
$('#ticker li').hover(function () {
// clear interval when mouse enters
clearInterval(clr);
},function(){
// again start animation when mouse leaves
animate();
});
});
Live Demo
Minor update in your answer. Use mouseover and out function.
$(document).ready(function() {
function ticker() {
$('#ticker li:first').slideUp(function() {
$(this).appendTo($('#ticker')).slideDown();
});
}
var ticke = setInterval(function(){ ticker(); }, 3000);
$('#ticker li').mouseover(function() {
clearInterval(ticke);
}).mouseout(function() {
ticke= setInterval(function(){ ticker(); }, 3000);
});
});
See here Demo
please try this one:
$(document).ready(function () {
function ticker() {
$('#ticker li:first').slideUp(function () {
$(this).appendTo($('#ticker')).slideDown();
});
}
var clr = null;
function animate(){
clr=setInterval(function () {
ticker();
}, 3000);
}
animate();
$('#ticker li').hover(function () {
// clear interval when mouse enters
clearInterval(clr);
},function(){
// again start animation when mouse leaves
animate();
});
});
The setInterval method returns an id value which you can then pass to clearInterval to cancel the calls to ticker().
Related
I have the following code:
$(function(){
setTimeout(function(){
$('.testimonial1').css("display", "none");
$('.testimonial2').css("display","block");
} ,3000);
setTimeout(function(){
$('.testimonial2').css('display', 'none');
$('.testimonial3').css('display', 'block');
}, 6000);
});
The issue is that it only run once. I would like after the second timeout, it loops back to the first timeout, and so forth.
For any clarification, kindly advise.
Try this:
$(function() {
function func1() {
setTimeout(function(){
$('.testimonial1').css("display", "none");
$('.testimonial2').css("display","block");
func2();
} ,3000);
}
function func2() {
setTimeout(function(){
$('.testimonial2').css('display', 'none');
$('.testimonial3').css('display', 'block');
func1();
}, 6000);
}
func1();
});
You can use the setInterval function in JQuery.
Here is a working example : JSFiddle setInterval
EDIT 1:
Updated JSFiddle link with fadeIn/fadeOut effects and added the code below:
Javascript
var refreshId = setInterval(function () {
setTimeout(function () {
$('#t1').fadeOut("slow", function () {
$('.testimonial1').css("display", "none");
});
$('#t2').fadeIn("slow", function () {
$('.testimonial2').css("display", "block");
});
}, 3000);
setTimeout(function () {
$('#t2').fadeOut("slow", function () {
$('.testimonial2').css("display", "none");
});
$('#t3').fadeIn("slow", function () {
$('.testimonial3').css("display", "block");
});
}, 6000);
}, 6000);
HTML
<div id="t1" class="testimonial1">Testimonial 1</div>
<div id="t2" class="testimonial2">Testimonial 2</div>
<div id="t3" class="testimonial3">Testimonial 3</div>
CSS
.testimonial1 {
display : block;
}
.testimonial2 {
display : block;
}
.testimonial3 {
display : block;
}
You can try looping it with setInterval
function play() {
setTimeout(function(){
$('.testimonial1').css("display", "none");
$('.testimonial2').css("display","block");
} ,3000);
setTimeout(function(){
$('.testimonial2').css('display', 'none');
$('.testimonial3').css('display', 'block');
}, 6000);
}
setInterval( play , 6000);
I want this loop forever
$(document).ready(function() {
function news_hot() {
$("div p").each(function(i) {
$(this).delay(1000 * i).queue(function() {
$(this).addClass('hot_li ');
$(this).prev().removeClass('hot_li');
});
});
}
news_hot();
});
<div>
<p>dfsdfsd</p>
<p>dfsdfsd</p>
<p>dfsdfsd</p>
</div>
You can use setInterval() JavaScript function with specified time in milliseconds. The called function will run forever after interval time unless you stop it.
$(document).ready(function () {
function news_hot() {
$("div p").each(function (i) {
$(this).delay(1000 * i).queue(function () {
$(this).addClass('hot_li ');
$(this).prev().removeClass('hot_li');
});
});
}
setInterval(news_hot(),5000);
});
UPDATED CODE WORKING FIDDLE
function news_hot() {
$("div p").each(function (i) {
$(this).delay(1000 * i).queue(function () {
$("div p").removeClass("hot_li");
$(this).addClass('hot_li');
//$(this).prev().removeClass('hot_li');
$(this).dequeue();
});
});
}
setInterval(function(){news_hot()},5000);
.dequeue() function has been added to the code
this is my jquery code.this code contain three functions.this three function repeatedly execute for looping.but this code not run properly.how to make recursive call with three functions.the pid1,pid2,pid3 is paragraph tag id's.this code used to make text animation.
$(document).ready(function(){
function animate()
{
$('#pid1').fadeOut(3000, function()
{
$(this).text('string1').fadeIn(3000);
});
animate1();
}
function animate1()
{
$('#pid2').fadeOut(3000, function()
{
$(this).text('string2').fadeIn(3000);
});
animate2();
}
function animate2()
{
$('#pid3').fadeOut(3000, function()
{
$(this).text('string3').fadeIn(3000);
});
animate();
}
});
try like this :
$(document).ready(function(){
function animate() {
$.when($('#pid1').fadeOut(3000, function() {
$(this).text('string1').fadeIn(3000);
})).then(function() {
animate1();
});
}
function animate1() {
$.when($('#pid2').fadeOut(3000, function() {
$(this).text('string2').fadeIn(3000);
})).then(function() {
animate2();
});
}
function animate2() {
$.when($('#pid3').fadeOut(3000, function() {
$(this).text('string3').fadeIn(3000);
})).then(function() {
animate();
});
}
animate();
});
Here a jsFiddle : http://jsfiddle.net/Pascalz/CNRSd/
You must call the function again after making sure that element has fadeout. You should use fadeout callback functions
change you function like this:
function animate()
{
$('#pid1').fadeOut(3000, function()
{
$(this).text('string1').fadeIn(3000, function(){animate(); });
});
}
Here is the link of jsbin by using callback functions
animate by using callback
I have this simple fiddle as a working example-
Jsfiddle
I am trying to detect mouseout event from a div section.
When i mouseover on this image it shows caption; saying "Change Image". After 5 seconds caption goes fadeOut.
I am using setInterval to set it accordingly. Now if I do mouseout of this image, then only I want Interval function should be called.
How do i detect mouseout event in jQuery?
Tried-
$(function () {
$('.image-profile').mouseover(function () {
$('.change-image').stop().show();
if ($('.image-profile').mouseout()== true) {
TimeOut();
}
});
setInterval(function TimeOut() {
$('.change-image').fadeOut()
}, 5000
);
});
var ImageProfileTimer;
$('.image-profile').on('mouseenter',function(){
clearTimeout(ImageProfileTimer);
$('.change-image').stop().show();
}).on('mouseleave',function(){
ImageProfileTimer = setTimeout(function(){
$('.change-image').fadeOut()
}, 5000);
});
Use setTimeout and clearTimeout
Demo : http://jsfiddle.net/xMNTB/9/
$('.image-profile').on('mouseleave', function() {
setTimeout(function() {
$('.change-image').fadeOut()
}, 5000);
});
http://jsfiddle.net/xMNTB/7/
Now the div show up on mouse enter and disappears 5 seconds after mouse leave.
$(function () {
$('.image-profile').mouseenter(function () {
$('.change-image').stop().show();
});
$('.image-profile').mouseleave(function () {
setTimeout(function TimeOut() {
$('.change-image').fadeOut()
}, 5000);
});
});
Try This:
(function () {
$('.image-profile').mouseover(function () {
$('.change-image').stop().show();
if ($('.image-profile').mouseout() == true) {
TimeOut();
}
}).mouseout(function () {
setInterval(function TimeOut() {
$('.change-image').fadeOut()
}, 5000);
});
});
JSFIDDLE DEMO
I want to reload window after a this custom function finishes:
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function () {
$('#order_form').dolPopupHide({});
}, 3000);
//window.location.reload();
});
</script>
Is there a way I can add the reload to the setTimeout function so it doesn't run until the timeout is over?
reload needs to be inside your function:
$(document).ready(function(){
setTimeout(function () {
$('#order_form').dolPopupHide({});
window.location.reload();
}, 3000);
});
If you want to conceptually separate the work from the reload, you can do something like this:
$(document).ready(function(){
setTimeout(function () {
doWork();
window.location.reload();
}, 3000);
function doWork() {
$('#order_form').dolPopupHide({});
}
});
Or, to be even more general:
function reloadAfterExec(fn)
return function() {
fn();
window.location.reload();
}
}
$(document).ready(function(){
setTimeout( reloadAfterExec(function() {
$('#order_form').dolPopupHide({});
}), 3000);
});