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
Related
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().
I want to add fade-in and fade-out transitions in this script, so i want to insert fadeOut(1000) fadeIn(1000) in the script.
Here is the script:
jQuery(document).ready(function () {
var $box=jQuery(".post"),
$bar=jQuery("a.bar_view");
$dat=jQuery("a.dat_view");
$dat.click(function () {
$box.removeClass("bar");
jQuery(this).addClass("active");
$bar.removeClass("active");
jQuery.cookie("dat_style", 0);
return false
});
$bar.click(function () {
$box.addClass("bar");
jQuery(this).addClass("active");
$dat.removeClass("active");
jQuery.cookie("dat_style", 1);
return false
});
if(jQuery.cookie("dat_style")==0) {
$box.removeClass( "bar");
$dat.addClass("active")
} else {
$box.addClass("bar");
$bar.addClass("active")
}
});
this is jQuery script for switch between grid and list views to display content.
This is the site, here i implemented this script: http://bbelog-megagrid.blogspot.com View the HTML Sources there.
This is a same example script transitions added:
$(document).ready(function () {
var elem=$('ul');
$('#viewcontrols a').on('click',function(e) {
if ($(this).hasClass('gridview')) {
elem.fadeOut(1000, function () {
elem.removeClass('list').addClass('grid');
elem.fadeIn(1000);
});
}
else if($(this).hasClass('listview')) {
elem.fadeOut(1000, function () {
elem.removeClass('grid').addClass('list');
elem.fadeIn(1000);
});
}
});
});
I want to modify the first script like this one.
you can add those like this
$dat.click(function () {
$box.removeClass("bar");
jQuery(this).addClass("active");
$bar.removeClass("active");
$bar.fadeOut(1000);
$dat.fadeIn(1000);
jQuery.cookie("dat_style", 0);
return false
});
$bar.click(function () {
$box.addClass("bar");
jQuery(this).addClass("active");
$dat.removeClass("active");
$dat.fadeOut(1000);
$bar.fadeIn(1000);
jQuery.cookie("dat_style", 1);
return false
});
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 would like this animation to repeat from the very beginning each time (#slide1).
I tried the setTimeout method but could not get it to work.
I am using a simple line by line since the timing difference and (lack of knowledge).
Thanks for your help.
http://jsfiddle.net/q9EZg/6/
$(document).ready(function () {
$("#slide1").fadeIn(2000, function () {
$("#slide1").delay(4000).fadeOut(2000);
$("#slide2").delay(6000).fadeIn(1000, function () {
$("#slide3").fadeIn(1000, function () {
$("#slide4").fadeIn(1000, function () {
$("#slide5").fadeIn(1000, function () {
$("#slide6").fadeIn(1000, function () {
$("#slide7").fadeIn(1000, function () {
$("#slide8").fadeIn(1000, function () {
$("#slide9").fadeIn(1000, function () {
$("div").delay(2000).fadeOut(1000, function () {});
});
});
});
});
});
});
});
});
});
});
<div id="slide1">Slide 1</div>
<div id="slide2">Slide 2</div>
<div id="slide3">Slide 3</div>
<div id="slide4">Slide 4</div>
<div id="slide5">Slide 5</div>
<div id="slide6">Slide 6</div>
<div id="slide7">Slide 7</div>
<div id="slide8">Slide 8</div>
<div id="slide9">Slide 9</div>
<div id="slide10">Slide 10</div>
Check the following JSFiddle...
$(document).ready(function () {
(function animate() {
$("#slide1").fadeIn(2000, function () {
$("#slide1").delay(4000).fadeOut(2000);
$("#slide2").delay(6000).fadeIn(1000, function () {
$("#slide3").fadeIn(1000, function () {
$("#slide4").fadeIn(1000, function () {
$("#slide5").fadeIn(1000, function () {
$("#slide6").fadeIn(1000, function () {
$("#slide7").fadeIn(1000, function () {
$("#slide8").fadeIn(1000, function () {
$("#slide9").fadeIn(1000, function () {
$("div").delay(2000).fadeOut(1000, animate); // Call animate again
});
});
});
});
});
});
});
});
});
}()); // Call the animate function
});
I wrapped your code in a Animate function that is called again after the last step.
PS. And yes you forget to enable JQuery in JSFiddle, but I assume that is not your question or related to your question.
Wrap you main animation logic in a function (which you have already done). Like this:
function Animate() {
//your animation logic
}
And then call the same function at regular interval. Like this:
setInterval(function(){
Animate()
}, 1000);
But, you definitely need to improve your main logic and structure.
Try this
JS CODE
$(document).ready(function () {
setInterval(intervalTest, 1000);
});
function intervalTest() {
$("#slide1").fadeIn(2000, function () {
$("#slide1").delay(4000).fadeOut(2000);
$("#slide2").delay(6000).fadeIn(1000, function () {
$("#slide3").fadeIn(1000, function () {
$("#slide4").fadeIn(1000, function () {
$("#slide5").fadeIn(1000, function () {
$("#slide6").fadeIn(1000, function () {
$("#slide7").fadeIn(1000, function () {
$("#slide8").fadeIn(1000, function () {
$("#slide9").fadeIn(1000, function () {
$("div").delay(2000).fadeOut(1000, function () {});
});
});
});
});
If you want a nice way of queueing up animations, you can make an animation queue array containing objects with instructions, something like this:
var animationQueueArr = [
{
selector: '#slide1',
delay: 4000,
animation: 'fadeIn',
duration: 2000,
callback: true
},
{
selector: '#slide1',
animation: 'fadeOut',
duration: 2000,
callback: false
},
{
selector: '#slide2',
delay: 6000,
animation: 'fadeIn',
duration: 2000,
callback: true
}
// and so on
];
Then, you can loop over them:
function animate (i, skipDelayBool) {
skipDelayBool = skipDelayBool || false;
var animationObj = animationQueueArr[i];
if (animationObj.delay && false === skipDelayBool) {
return setTimeout(function () {
animate(i, true);
}, animationObj.delay);
}
if (false === animationObj.callback) {
$(animationObj.selector)[animationObj.animation](animationObj.duration);
i += 1;
i %= animationQueueArr.length; // reset back to 0 if necessary to start new loop
animate(i);
} else {
$(animationObj.selector)[animationObj.animation](animationObj.duration,
function () {
i += 1;
i %= animationQueueArr.length;
animate(i);
);
}
}
animate(0);
Note I havent tested this, but it will send you on the right path and away from your worst indentation nightmares.
I've already answered this question once. Duplicate: jQuery looping command
See the edits to the question and you will see that I have answered it twice now.
$(document).ready(function me() {
$("#slide1").fadeIn(100).delay(100).fadeOut(100, function () {
(function startFade(slide, step) {
if ((slide === 1) && (step === -1)) {
setTimeout(me, 100);
} else if (slide < 10) {
$("#slide" + slide)[step === 1 ? "fadeIn" : "fadeOut"](100, function () {
startFade(slide + step, step);
});
} else {
startFade(slide - step, -step);
}
}(2, 1));
});
});