I've created a text rotator that uses speed and interval to determine how fast and when to rotate the text. Everything seems to be working ok, just the only issue I have is the flickering between the last and the first transitions. So in other words I can see the old and the new entry together. Can someone help me to avoid this?
My JSFIDDLE is here
And my JQuery code is:
(function($) {
$(document).ready(function(){
//<![CDATA[
(function($) {
$.fn.rotator = function(settings) {
settings = jQuery.extend({
interval: 5000,
speed:800,
}, settings);
return this.each(function() {
var $t = $(this),
$item = $t.children().addClass('item').hide();
$t.addClass('rotator');
if ($item.length > 1) {
$item.first().addClass('current').fadeIn(settings.speed);
setInterval(function() {
var c = $t.find('.current');
if (c.next().length === 0) {
c.removeClass('current').fadeOut(settings.speed);
$item.first().addClass('current').fadeIn(settings.speed);
} else {
c.fadeOut(settings.speed, function () {
$(this).removeClass('current')
.next().addClass('current')
.fadeIn(settings.speed)
});
}
}, settings.interval);
}
});
};
})(jQuery);
// Execute here!
$(function() {
$('#slider').rotator();
});
//]]>
});
})(jQuery);
Related
I am not sure how to ask this question. I made a jQuery function for a banner.
$(document).ready(function() {
ionanim();
setInterval(ionanim, 12000);
function ionanim() {
$(function () {
$('.ion1anim').fadeIn(500, function () {
$(this).delay(5000).fadeOut(500);
});
});
$(function () {
$('.ion2anim').delay(6000).fadeIn(500, function () {
$(this).delay(5000).fadeOut(500);
});
});
};
});
Link for the full animation : http://jsfiddle.net/L8XHL/11/
But with each intervatl on the setInverval the animations go close to each other after some time they overlap each other.
Did i do anything wrong?
Intervals and animations aren't exact enough to handle the timing that you require. I'd suggest using a self-executing function instead so that it will never overlap.
Also, you are over-using the document ready handler. Please stop.
http://jsfiddle.net/L8XHL/13/
$(document).ready(function () {
ionanim();
function ionanim() {
$('.ion1anim').fadeIn(500, function () {
$(this).delay(5000).fadeOut(500, function () {
$('.ion2anim').fadeIn(500, function () {
$(this).delay(5000).fadeOut(500,ionanim);
});
});
});
}
});
I would further modify this to work more like a slider so that you can add an infinite number of items without having a huge pyramid of code.
http://jsfiddle.net/L8XHL/17/
$(document).ready(function () {
$(".ionbanner .bottom div").first().siblings().hide();
anim();
function anim() {
var curr = $(".ionbanner .bottom :visible");
var next = curr.next();
if (next.length == 0) {
next = curr.siblings().first();
}
curr.delay(5000).fadeOut(500,function(){
next.fadeIn(500,anim);
});
}
});
Or you could try something like this: http://jsfiddle.net/L8XHL/16/
$(document).ready(function() {
var anim1 = function() {
$('.ion1anim').fadeIn(1000, anim1Callback);
},
anim1Callback = function() {
$('.ion1anim').fadeOut(1000, anim2);
},
anim2 = function() {
$('.ion2anim').fadeIn(1000, anim2Callback);
},
anim2Callback = function() {
$('.ion2anim').fadeOut(1000, anim1);
};
anim1();
});
I'm implementing a jquery carousel into my page. Because I have used percentage units rather than fixed units, I need to redraw the carousel after window resize.
My problem is that the carousel stops to work correctly and its function call does not behave normally and renders the carousel oddly after resizing using the following code:
jQuery(document).ready(function ($) {
FnUpdateCarousel();
}); // end ready
var lightbox_resize = false;
$(window).resize(function() {
if (lightbox_resize)
clearTimeout(lightbox_resize);
lightbox_resize = setTimeout(function() {
FnUpdateCarousel();
}, 100);
});
function FnUpdateCarousel() {
var widthof =
Math.round(parseInt(jQuery('#services-example-1').css('width'))-(45));
jQuery('#services-example-1').services(
{
width:widthof,
height:290,
slideAmount:6,
slideSpacing:30,
touchenabled:"on",
mouseWheel:"on",
hoverAlpha:"off",
slideshow:3000,
hovereffect:"off"
});
};
Please guide me on how can I make it behave normally.
Here is the solution I reached:
<script type="text/javascript">
var initialContent = jQuery('#services-example-1').html();
jQuery(document).ready(function ($) {
FnUpdateCarousel();
}); // end ready
var lightbox_resize = false;
$(window).resize(function() {
if (lightbox_resize)
clearTimeout(lightbox_resize);
lightbox_resize = setTimeout(function() {
jQuery('#services-example-1').empty();
jQuery('#services-example-1').html(initialContent);
FnUpdateCarousel();
}, 200);
});
function FnUpdateCarousel() {
var widthof =
Math.round(parseInt(jQuery('#services-example-1').css('width'))-(45));
jQuery('#services-example-1').services(
{
width:widthof,
height:290,
slideAmount:6,
slideSpacing:30,
touchenabled:"on",
mouseWheel:"on",
hoverAlpha:"off",
slideshow:3000,
hovereffect:"off"
});
};
</script>
i wrote a jquery plugin to make a div auto scroll,i used function setInterval to make the div stop for a while and then keeps on scroll.
here is the code
(function($){
"use strict";
function scrolltotop(obj,height,speed){
var ch=parseInt($(obj).css("margin-top"))+29;
$(obj).parent().find(".moving").remove();
$(obj).after($(obj).clone().addClass("copy"));
$(obj).addClass("moving").removeClass("copy").animate({
"margin-top":-27
},speed);
loop=setInterval(function(){
ch+=27;
if(ch < height+27){
$(obj).animate({
"margin-top":-ch
},speed,function(){
loop;
})
}else{
clearInterval(loop);
scrolltotop($(obj).next(".copy"),height,speed);
}
},4000)
}
$.fn.extend({
autoscroll: function(options) {
var defaults = {
speed: 1000,
scroller : '#scroller',
scroller_container : '#scroller_container'
}
var options = $.extend(defaults, options);
var height=$(options.scroller).height();
var stop=stopscroll();
//console.log(height)
scrolltotop(options.scroller,height,options.speed);
},
});
}(jQuery));
$("#list2").autoscroll({scroller:"#list2",scroller_container:"#container_2"});
it works well,but idont know how to make the div stop scroll after i init the plugin.
if I understand the problem you want to move the div scroll line by line waiting 4s until you reach the end.
I simplified your scrolltotop function
function scrolltotop(obj,height,speed){
var ch = 0;
var loop = setInterval(function(){
ch+=27;
$('#container_2').animate({
scrollTop: ch
}, speed);
if(ch >= height){
console.log('Out of loop');
clearInterval(loop);
}
},4000);
}
You can see a working example here http://jsfiddle.net/jCw3y/
May be you can adapt my code to use it in your plugin.
(You're using "use strict". Remember to declare javascript variables always. var loop, var ch e.t.c)
To stop manually you can save the intervalId and call clearInterval when you want.
Check this example: http://jsfiddle.net/ccR4t/
And finally, another example with pure jquery. Using animate and stop functions to control all.
(function ($) {
"use strict";
function scrolltotop($container, options) {
$container.animate({
scrollTop: options.scrollerHeight
}, options.speed, function () {
console.log('Animation completed');
});
}
$.fn.extend({
autoscroll: function (options) {
var $me = this;
var defaults = {
speed: 1000,
scroller_container: '#scroller_container',
scroller: '#list2'
}
var options = $.extend(defaults, options);
options.scrollerHeight = $(options.scroller).height();
scrolltotop($me, options);
},
});
}(jQuery));
$("#container_2").autoscroll({
scroller: '#list2',
speed: 10000
});
// stop scroll after 4 sec
setTimeout(function () {
$('#container_2').stop();
alert('scroll manually stopped')
}, 4000);
Working example:
http://jsfiddle.net/c8Ns8/
How do I add a pause effect when I hover over an image in a jQuery slideshow?
$(document).ready(function () {
slideShow();
});
function slideShow() {
var showing = $('#slideshow .show');
var next = showing.next().length ? showing.next() : showing.parent().children(':first');
var timer;
showing.fadeOut(500, function () {
next.fadeIn(200).addClass('show');
}).removeClass('show');
setTimeout(slideShow, 3000);
}
var hovering = false; //default is not hovering
$("#slideshow").hover(function () { //*replace body with your element
hovering = true; //when hovered, hovering is true
}, function () {
hovering = false; //when un-hovered, hovering is false
slideShow(); //start the process again
});
function slideShow() {
if(!hovering) { //if not hovering, proceed
/* Your code here*/
nextSlide();
setTimeout(slideShow, 1000);
}
}
function nextSlide(){
var showing = $('#slideshow .show');
var next = showing.next().length ? showing.next() : showing.parent().children(':first');
var timer;
showing.fadeOut(500, function () {
next.fadeIn(200).addClass('show');
}).removeClass('show');
}
Demo: http://jsfiddle.net/DerekL/mqEbZ/
Use .delay() that will help.
Description: Set a timer to delay execution of subsequent items in the queue.
I think you need two functions for that ... slideShow() and other one say pauseSlideshow()... now call the slideshow() on mouseout event and on mouseenter call pauseSlideShow()
your code should be something like this
$(document).ready(function(){
$('.slider').mouseout( slideShow());
$('.slider').mouseenter( pauseSlideShow());
});
function slideShow() {
var showing = $('#slideshow .show');
var next = showing.next().length ? showing.next() : showing.parent().children(':first');
var timer;
showing.fadeOut(500, function() { next.fadeIn(200).addClass('show'); }).removeClass('show');
timeOut = setTimeout(slideShow, 3000);
}
function PauseSlideShow() {
window.clearTimeout(timeOut);
}
TRY IT
Working off of Derek's answer, an alternative to hover would be to use mouseenter and mouseleave.
See the working slideshow Jsfiddle: Demo: http://jsfiddle.net/highwayoflife/6kDG7/
var hovering = false;
var slideshow = $("#slideshow");
slideshow.mouseenter(function() {
hovering = true;
}).mouseleave(function() {
hovering = false;
slideShow();
});
function slideShow() {
if (!hovering) {
# Some browsers don't interpret "display:block" as being visible
# If no images are deemed visible, choose the first...
var currentImg = (slideshow.children("img:visible").length) ? slideshow.children("img:visible") : slideshow.children("img:first");
var nextImg = (currentImg.next().length) ? currentImg.next() : slideshow.children("img:first");
currentImg.fadeOut(500, function() {
nextImg.fadeIn(500, function() {
setTimeout(slideShow, 2000);
});
});
}
}
$(document).ready(function() {
slideShow();
});
What I need to achieve is if we click on submit button, there is particular div should show up.
Here is my code:
http://jsfiddle.net/7tn5d/
But if I click on submit button multiple times, the function calls sort of queue up and run one after other.
Is there a way to invalidate other onclicks when current animation is running?
Code:
animating = 0;
doneanim = 0;
$(function () {
$("#submit_tab").click(function (e) {
if (animating == 1) return;
animating = 1;
$("#submit_cont").show("blind", {}, 1000);
animating = 0;
});
});
To prevent it from performing the action multiple times, simple cease the previous animation. So:
$('#submit_cont').stop().show("blind",{},1000);
However, I have noticed that you have attempted to prevent the animation from running, if an animation is already running. Although it takes 1 second or 1000 milliseconds to show the div, the execution of the condition does not pause until the animation is complete. You must define a function to run after the animation is complete, like so:
animating = 0;
doneanim = 0;
$(function () {
$("#submit_tab").click(function (e) {
if (animating == 1) return;
animating = 1;
$("#submit_cont").show("blind", 1000, function() { animation = 0; });
});
});
Hope that helped...
You almost got it right with the semaphore! It's just that, in jQuery's show(), you would have to put the semaphore reset as an argument. Here's the fixed version - http://jsfiddle.net/snikrs/xe5A3/
animating = 0;
doneanim = 0;
$(function () {
$("#submit_tab").click(function (e) {
if (animating == 1) return;
animating = 1;
$("#submit_cont").show("blind", 1000, function() {
animating = 0;
});
});
});
You can use the :animated selector to check:
$(function () {
$("#submit_tab").click(function (e) {
var $cont = $("#submit_cont");
if (!$cont.is(':animated')) {
$cont.show("blind", {}, 1000);
}
});
});
Now if you stick with the external semaphore idea then its better to stick that on the elemnt with .data() instead of using a global variable:
$(function () {
$("#submit_tab").click(function (e) {
var $cont = $('#submit_cont'),
animating = $cont.data('isAnimating');
if (animating) {
return;
} else {
$cont.data('isAnimating', 1);
$("#submit_cont").show("blind", 1000, function() { $cont.data('isAnimating', 0); });
}
});
});
Something like this (see documentation) :)
$("#submit_cont").show("blind", function(){
animating = 0;
});
You can add a $("#submit_cont").clearQueue(); after the animation finished :
$("#submit_tab").click(function (e) {
$("#submit_cont").show("blind", 1000, function() {
$("#submit_cont").clearQueue();
});
});
Updated JSFiddle
I found a different solution for this, which in my opinion looks cleaner:
var tab = $("submit_tag");
tab.on("click", function(){
var cont = $("submit_cont");
var animating = tab.queue("fx").length;
if(animating === 0){
cont.show("blind", {}, 1000);
}
});