Develop Reference

Changing interval of setInterval and all animations are run together

I am dealing with following jquery which contains multiple image animations.My query is, through setInterval, my animation is not run step by step and it doesn't maintain interval sometimes. Sometimes my 1st animation and 2nd animation runs together. How can I resolve it and run my all three animation step by step in specific interval? Can we use setTimeout? if yes then how? Please excuse me if I wrote incorrect interval time in following jquery as I am beginner in jquery.
$(document).ready(function() {
var runAnimate1 = true;
var runAnimate2 = false;
var runAnimate3 = false;
setInterval(function() {
if (runAnimate1) {
$("#animate1").fadeIn('slow').animate({
'display': 'inline-block',
'margin-left': '220px',
'margin-bottom': '20px'
}, 500, function() {
$('.1st').animate({
'opacity': '0'
}, 1000, function() {
$('.1st').animate({
'opacity': '1'
})
})
}).fadeOut();
$("#animate1").fadeIn('slow').animate({
'margin-bottom': '0px',
'margin-left': '-140px'
}, 1000, function() {
runAnimate1 = false;
runAnimate2 = true;
runAnimate3 = false;
}).fadeOut('slow');
}
if (runAnimate2) {
$(".2nd").fadeIn('slow').animate({
'margin-left': '150px',
'margin-bottom': '2px'
}, 600, function() {
$('.1st').animate({
'opacity': '0'
}, 1000, function() {
$('.1st').animate({
'opacity': '1'
}, 1000)
})
}).fadeOut();
$(".2nd").fadeIn('slow').animate({
'margin-bottom': '0px',
'margin-left': '-150px'
}, 1000, function() {
runAnimate1 = false;
runAnimate2 = false;
runAnimate3 = true
}).fadeOut('slow');
}
if (runAnimate3) {
$('.3rd').fadeIn('slow').animate({
'display': 'inline-block',
'margin-left': '220px',
'margin-bottom': '2px'
}, 1000, function() {
$('.1st').animate({
'opacity': '0'
}, 1000, function() {
$('.1st').animate({
'opacity': '1'
})
})
}).fadeOut('slow');
$('.3rd').fadeIn('slow').animate({
'margin-bottom': '0px',
'margin-left': '-220px'
}, 1000, function() {
runAnimate1 = true;
runAnimate2 = false;
runAnimate3 = false;
}).fadeOut('slow');
}
}, 6000);
});
My html is as follow:
<div id="outer-box" class="1st">
<img class="1st" src="img/sofa2.jpg">
<div id="animate1" style="display: none; position: absolute; bottom: 0; left: 0;">
<img class="1st" src="img/chotu.png" style="height:300px; width:200px;" />
</div>
<div class="2nd 1st" style="display:none; position:absolute; bottom:0; left:0">
<img src="img/hand.png" style="width:200px; height:300px;">
</div>
<div class="3rd 1st" style="display:none; position:absolute; bottom:0; left:0">
<img src="img/handyh.png" style="width:180px; height: 150px;">
</div>
</div>

If you store the setInterval in a variable you will be able to change it.
To change the time one possible solution is:
var interval = setInterval(functionName,3000);
function changeTime(newTime) {
clearInterval(interval);
interval = setInterval(functionName,newTime);
}

Can't clearInterval on animation

I have some problem with this code, in this case i set div as a button, when I click the button everything is working as expected but when I want to stop animation with clearInterval it doesn’t work, just keeps looping... What I am doing wrong?
var timeout;
var d1=$(".drum1");
function dani1(){
d1.animate({height:'150px', width:'150px', opacity:'0.4'},"slow");
d1.animate({height:'100px', width:'100px',opacity:'0.8'},"fast");
}
d1.click(function(){
if (!timeout){
timeout = setInterval(dani1, 200);
} else {
clearInterval(timeout);
timeout = null;
}
});
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

You do not need setInterval at all..
var d1 = $(".drum1").data('end', true);
function dani1() {
if (d1.data('end'))
return d1.stop(true, true);
d1.animate({
height: '150px',
width: '150px',
opacity: '0.4'
}, "slow")
.animate({
height: '100px',
width: '100px',
opacity: '0.8'
}, "fast", dani1);
}
d1.click(function() {
if (!d1.data('end'))
d1.data('end', true);
else {
d1.data('end', false);
dani1();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

The problem is your usage of setInterval(), it will queue a lot of animations every 200ms so even after clearing the interval there are a lot of animations present in the animation queue.
One easy solution is to clear the animation queue also
var timeout;
var d1 = $(".drum1");
function dani1() {
d1.animate({
height: '150px',
width: '150px',
opacity: '0.4'
}, "slow");
d1.animate({
height: '100px',
width: '100px',
opacity: '0.8'
}, "fast");
}
d1.click(function() {
if (!timeout) {
timeout = setInterval(dani1, 200);
} else {
d1.stop(true, true)
clearInterval(timeout);
timeout = null;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
Without interval
var play;
var d1 = $(".drum1");
function dani1() {
d1.animate({
height: '150px',
width: '150px',
opacity: '0.4'
}, "slow");
d1.animate({
height: '100px',
width: '100px',
opacity: '0.8'
}, "fast");
return d1.promise();
}
d1.click(function() {
if (play) {
play = false;
d1.stop(true, true)
} else {
play = true;
anim();
}
function anim() {
dani1().done(function() {
if (play === true) {
anim();
}
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

A close button for Lightbox_me

I've googled for a script for a close button for Lightbox_me, however all I've been able to find are scripts for bare-bones lightboxes.
(function ($) {
$.fn.lightbox_me = function (options) {
return this.each(function () {
var
opts = $.extend({}, $.fn.lightbox_me.defaults, options),
$overlay = $(),
$self = $(this),
$iframe = $('<iframe id="foo" style="z-index: ' + (opts.zIndex + 1) + ';border: none; margin: 0; padding: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: mask();"/>');
if (opts.showOverlay) {
//check if there's an existing overlay, if so, make subequent ones clear
var $currentOverlays = $(".js_lb_overlay:visible");
if ($currentOverlays.length > 0) {
$overlay = $('<div class="lb_overlay_clear js_lb_overlay"/>');
} else {
$overlay = $('<div class="' + opts.classPrefix + '_overlay js_lb_overlay"/>');
}
}
/*----------------------------------------------------
DOM Building
---------------------------------------------------- */
$('body').append($self.hide()).append($overlay);
/*----------------------------------------------------
Overlay CSS stuffs
---------------------------------------------------- */
// set css of the overlay
if (opts.showOverlay) {
setOverlayHeight(); // pulled this into a function because it is called on window resize.
$overlay.css({
position: 'absolute',
width: '100%',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: (opts.zIndex + 2),
display: 'none'
});
if (!$overlay.hasClass('lb_overlay_clear')) {
$overlay.css(opts.overlayCSS);
}
}
/*----------------------------------------------------
Animate it in.
---------------------------------------------------- */
//
if (opts.showOverlay) {
$overlay.fadeIn(opts.overlaySpeed, function () {
setSelfPosition();
$self[opts.appearEffect](opts.lightboxSpeed, function () {
setOverlayHeight();
setSelfPosition();
opts.onLoad()
});
});
} else {
setSelfPosition();
$self[opts.appearEffect](opts.lightboxSpeed, function () {
opts.onLoad()
});
}
/*----------------------------------------------------
Hide parent if parent specified (parentLightbox should be jquery reference to any parent lightbox)
---------------------------------------------------- */
if (opts.parentLightbox) {
opts.parentLightbox.fadeOut(200);
}
/*----------------------------------------------------
Bind Events
---------------------------------------------------- */
$(window).resize(setOverlayHeight)
.resize(setSelfPosition)
.scroll(setSelfPosition);
$(window).bind('keyup.lightbox_me', observeKeyPress);
if (opts.closeClick) {
$overlay.click(function (e) {
closeLightbox();
e.preventDefault;
});
}
$self.delegate(opts.closeSelector, "click", function (e) {
closeLightbox();
e.preventDefault();
});
$self.bind('close', closeLightbox);
$self.bind('reposition', setSelfPosition);
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*----------------------------------------------------
Private Functions
---------------------------------------------------- */
/* Remove or hide all elements */
function closeLightbox() {
var s = $self[0].style;
if (opts.destroyOnClose) {
$self.add($overlay).remove();
} else {
$self.add($overlay).hide();
}
//show the hidden parent lightbox
if (opts.parentLightbox) {
opts.parentLightbox.fadeIn(200);
}
if (opts.preventScroll) {
$('body').css('overflow', '');
}
$iframe.remove();
// clean up events.
$self.undelegate(opts.closeSelector, "click");
$self.unbind('close', closeLightbox);
$self.unbind('repositon', setSelfPosition);
$(window).unbind('resize', setOverlayHeight);
$(window).unbind('resize', setSelfPosition);
$(window).unbind('scroll', setSelfPosition);
$(window).unbind('keyup.lightbox_me');
opts.onClose();
}
/* Function to bind to the window to observe the escape/enter key press */
function observeKeyPress(e) {
if ((e.keyCode == 27 || (e.DOM_VK_ESCAPE == 27 && e.which == 0)) && opts.closeEsc) closeLightbox();
}
/* Set the height of the overlay
: if the document height is taller than the window, then set the overlay height to the document height.
: otherwise, just set overlay height: 100%
*/
function setOverlayHeight() {
if ($(window).height() < $(document).height()) {
$overlay.css({
height: $(document).height() + 'px'
});
$iframe.css({
height: $(document).height() + 'px'
});
} else {
$overlay.css({
height: '100%'
});
}
}
/* Set the position of the modal'd window ($self)
: if $self is taller than the window, then make it absolutely positioned
: otherwise fixed
*/
function setSelfPosition() {
var s = $self[0].style;
// reset CSS so width is re-calculated for margin-left CSS
$self.css({
left: '50%',
marginLeft: ($self.outerWidth() / 2) * -1,
zIndex: (opts.zIndex + 3)
});
/* we have to get a little fancy when dealing with height, because lightbox_me
is just so fancy.
*/
// if the height of $self is bigger than the window and self isn't already position absolute
if (($self.height() + 80 >= $(window).height()) && ($self.css('position') != 'absolute')) {
// we are going to make it positioned where the user can see it, but they can still scroll
// so the top offset is based on the user's scroll position.
var topOffset = $(document).scrollTop() + 40;
$self.css({
position: 'absolute',
top: topOffset + 'px',
marginTop: 0
})
} else if ($self.height() + 80 < $(window).height()) {
//if the height is less than the window height, then we're gonna make this thing position: fixed.
if (opts.centered) {
$self.css({
position: 'fixed',
top: '50%',
marginTop: ($self.outerHeight() / 2) * -1
})
} else {
$self.css({
position: 'fixed'
}).css(opts.modalCSS);
}
if (opts.preventScroll) {
$('body').css('overflow', 'hidden');
}
}
}
});
};
$.fn.lightbox_me.defaults = {
// animation
appearEffect: "fadeIn",
appearEase: "",
overlaySpeed: 250,
lightboxSpeed: 300,
// close
closeSelector: ".close",
closeClick: true,
closeEsc: true,
// behavior
destroyOnClose: false,
showOverlay: true,
parentLightbox: false,
preventScroll: false,
// callbacks
onLoad: function () {},
onClose: function () {},
// style
classPrefix: 'lb',
zIndex: 999,
centered: true,
modalCSS: {
top: '100px'
},
overlayCSS: {
background: 'black',
opacity: .3
}
}
$('.trigger').click(function (e) {
$('.lightbox').lightbox_me();
e.preventDefault();
});
})(jQuery);
This is the jsfiddle with the script for Lightbox_me.
I tried to incorporate the close-button scripts for the bare-bones lightboxes into Lightbox_me, but I simply don't know where to start. Would I have to format a close button onto each of the lightboxed divs individually and simply bind closeLightbox();? Or is there a more elegant way to do it involving only the script?

By default the script has these defined:
$.fn.lightbox_me.defaults = {
// animation
appearEffect: "fadeIn",
appearEase: "",
overlaySpeed: 250,
lightboxSpeed: 300,
// close
closeSelector: ".close",
closeClick: true,
closeEsc: true,
// behavior
destroyOnClose: false,
showOverlay: true,
parentLightbox: false,
preventScroll: false,
// callbacks
onLoad: function () {},
onClose: function () {},
// style
classPrefix: 'lb',
zIndex: 999,
centered: true,
modalCSS: {
top: '100px'
},
overlayCSS: {
background: 'black',
opacity: .3
}
}
You'll notice in the close section that it defaults to looking for elements with the class "close".
So if you stick a div with that class inside your lightbox, style as you please then it will trigger the close action.
The logic for closing based on the script:
if (opts.closeClick) {
$overlay.click(function (e) {
closeLightbox();
e.preventDefault;
});
}
$self.delegate(opts.closeSelector, "click", function (e) {
closeLightbox();
e.preventDefault();
});
This part of the logic informs lightbox_me that if closeClick is true within the list of options passed to it, that it will setup clicks on the overlay to close the lightbox.
As well it will bind current and future elements with the value defined in opts.closeSelector to also initiate the closeLightbox function when clicked.
Simple example fiddle: http://jsfiddle.net/zn2hg7L8/1/

infinite loop for div scroll

I am trying to impliment tweet scroller on http://www.hubspot.com/
which is i guess using tweet-scroller from http://code.divshot.com/tweetscroller/
but this link is broken as demo is not working.
i looked for alternative.
I found http://jsfiddle.net/doktormolle/4c5tt/
HTML:
<ul class="slide">
<li><img src="http://www.google.com/logos/2010/canadianthanksgiving2010-hp.jpg"/></li>
<li><img src="http://www.google.com/logos/2010/germany10-hp.gif"/></li>
<li><img src="http://www.google.com/logos/stpatricks_02.gif"/></li>
</ul>
CSS:
ul.slide{margin:0;
padding:0;
height:80px;
list-style-type:none;}
ul.slide li{float:left;
list-style-type:none;}
ul.slide img{border:1px solid silver;
height:80px;}
JS:
//Plugin start
(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
var _this = $(this);
_this.data('marquee', options);
var _li = $('>li', _this);
_this.wrap('<div class="slide_container"></div>')
.height(_this.height())
.hover(function () {
if ($(this).data('marquee').stop) {
$(this).stop(true, false);
}
},
function () {
if ($(this).data('marquee').stop) {
$(this).marquee('slide');
}
})
.parent()
.css({
position: 'relative',
overflow: 'hidden',
'height': $('>li', _this).height()
})
.find('>ul')
.css({
width: screen.width * 2,
position: 'absolute'
});
for (var i = 0; i < Math.ceil((screen.width * 3) / _this.width()); ++i) {
_this.append(_li.clone());
}
_this.marquee('slide');
});
},
slide: function () {
var $this = this;
$this.animate({
'left': $('>li', $this).width() * -1
},
$this.data('marquee').duration,
'swing',
function () {
$this.css('left', 0).append($('>li:first', $this));
$this.delay($this.data('marquee').delay).marquee('slide');
}
);
}
};
$.fn.marquee = function (m) {
var settings = {
'delay': 2000,
'duration': 900,
'stop': true
};
if (typeof m === 'object' || !m) {
if (m) {
$.extend(settings, m);
}
return methods.init.apply(this, [settings]);
} else {
return methods[m].apply(this);
}
};
})(jQuery);
//Plugin end
//call
$(document).ready(
function () {
$('.slide').marquee({
delay: 3000
});
}
);
which works fine with little modification i did
http://jsfiddle.net/3pZwR/1/
only problem is it stops after each div is scrolled.
I want it to be infinite scroll like effect without getting it stopped. like on hubspot.

You should use another JQuery Easing method instead of "swing".
Have a look at the Easings on the JQuery website: http://api.jqueryui.com/easings/

JQuery smooth animation

I have this animation that makes some buttons on screen 'beat'. It works fine exept one thing, the animation is too 'sharp' and not smooth, how can I smooth it?
function myFunction() {
setInterval(function () {
tstFnc();
}, 1000);
}
var flag = true;
function tstFnc() {
var numM = Math.floor((Math.random() * 10) + 1);
var stringM = '#mgf_main' + numM + ' img';
$(stringM).animate({
width: '80px',
height: '80px'
}, 150, function () {
$(stringM).animate({
width: '68px',
height: '68px'
}, 150, function () {
// nothing
});
});
};

You can set the easing property on the animate options.
http://api.jquery.com/animate/
http://easings.net/

Try this here, animatethis is a function and target element is the id of element and speed is depend on you.. and marginleft is a example, you should try your code.
function animatethis(targetElement, speed) {
$(targetElement).animate({ width: "+=10px", height: "+=10px"},
{
duration: speed,
complete: function () {
targetElement.animate({width: "+=10px", height: "+=10px" },
{
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
});
}