Working on a site
http://lsmcreative.co.nz/
I get a funny bug when using the nav to filter the thumbs. The images do a wierd movement to the left when animating
The container is position relative like the documentation I am not sure what is going on
My code is like this
and pretty much when you click on a button in the menu the thumbs are all of a sudde pushed like 200px to the left and then animate back into place?
// Custom sorting plugin
(function($) {
$.fn.sorted = function(customOptions) {
var options = {
reversed: false,
by: function(a) { return a.text(); }
};
$.extend(options, customOptions);
$data = $(this);
arr = $data.get();
arr.sort(function(a, b) {
var valA = options.by($(a));
var valB = options.by($(b));
if (options.reversed) {
return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
} else {
return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
}
});
return $(arr);
};
})(jQuery);
// DOMContentLoaded
$(function() {
// bind radiobuttons in the form
var $btn = $('#navigation ul li a');
// get the first collection
var $projectThumbs = $('#portfolio');
// clone applications to get a second collection
var $data = $projectThumbs.clone();
// attempt to call Quicksand on every form change
$btn.click(function(e) {
e.preventDefault();
if($(this).data("type") == "all"){
$btn.removeClass("selected");
$(this).addClass("selected");
var $filteredData = $data.find('li');
} else {
$btn.removeClass("selected");
$(this).addClass("selected");
var $filteredData = $data.find('li[data-type~=' + $(this).data("type") + ']');
} // end $btn.click function
$projectThumbs.quicksand($filteredData, {
adjustHeight: 'auto', // This is the line you are looking for.
duration: 800,
easing: 'easeInOutQuad'
}, function(){
// call js on the cloned divs
$("a.grouped_elements").fancybox();
});
});
});
I fixed it by adding
left:2.9702970297%!important; to the css of the li
and then
#portfolio li:nth-child(3n+1){
margin-left:0;
}
Related
I cant get my head around this, been trying many many different ways but no luck.. Basically, I'm trying to pause the animation on mouseOver and resume it on mouseOut. I was able to make it pause by simply using clearTimeout() but I have no idea on how to resume it back on. Please kindly advise me with a correct solution and syntax.
Thank you in advance!
(function ($) {
$.fn.simpleSpy = function (interval, limit) {
limit = limit || 3;
interval = interval || 3000;
items = [];
return this.each(function () {
$list = $(this),
currentItem = 0,
total = 0; // initialise later on
var i = 0;
smplet = $list.clone();
smplet.css("display","none");
$("body").append(smplet);
total = smplet.find('> li').length;
$list.find('> li').filter(':gt(' + (0) + ')').remove();
$list.css("display","");
height = $list.find('> li:first').height();
$list.wrap('<div class="spyWrapper" />').parent().css({ height : 55, position:"relative", overflow:"hidden" });
$('.close').click(function(){
clearTimeout(timec);
if(currentItem == 0 && smplet.length != 1)
delitem=total;
else
delitem=currentItem - 1;
smplet.find('> li').eq(delitem).remove();
currentItem--;
var temp=smplet.find('> li').eq(currentItem).clone();
var $insert = temp.css({
"margin-top":-height-height/3,
opacity : 0
}).prependTo($list);
// fade the LAST item out
$list.find('> li:last').animate({ opacity : .5 ,"margin-top":height/3}, 500, function () {
$(this).remove();
});
$insert.animate({"margin-top":0,opacity : 1 }, 500).animate({opacity : 1},1000);
currentItem++;
total=smplet.find('> li').length;
if (currentItem >= total) {
currentItem = 0;
}
if (total == 1){
simpleSpy.stop();
}
else if(total == 0){
$("#topbar").hide();
}
timec=setTimeout(spy, interval);
});
currentItem++;
function spy() {
var temp=smplet.find('> li').eq(currentItem).clone();
var $insert = temp.css({
"margin-top":-height-height/3,
opacity : 0,
display : 'none'
}).prependTo($list);
$list.find('> li:last').animate({ opacity : .5 ,"margin-top":height/3}, 500, function () {
$(this).remove();
});
$insert.animate({"margin-top":0,opacity : 1 }, 500).animate({opacity : 1},1000);
$insert.css("display","");
currentItem++;
if (currentItem >= total) {
currentItem = 0;
}
timec=setTimeout(spy, interval);
}
timec=setTimeout(spy, interval);
});
};
$('ul.alerts')
.mouseover(function(){
clearTimeout(timec);
})
.mouseout(function(){
timec=setTimeout(spy, interval);
});
})(jQuery);
Call
$(document).ready(function() {
$('ul.alerts').simpleSpy();
});
jsfiddle with html and css
http://jsfiddle.net/1781367/3eK4K/3/
I changed the timeout, which you were setting over and over, to an interval, which you only need to set once. Then I added a "paused" property that is set to true on mouseover and back to false on mouseout.
var paused = false;
$list.mouseover(function() { paused = true; });
$list.mouseout(function() { paused = false; });
Then we just check that property before the rotation animation occurs:
if (paused) {
return;
}
http://jsfiddle.net/3eK4K/6/
I'm facing a bit of a jQuery conundrum, and I'd appreciate someone helping me to solve it.
I want to fade in a web page, using jQuery, after all the text and images have loaded. So I set body style inline as "display:none" and then fade in the body using this basic snippet:
<script type="text/javascript">
$(window).load(function() {
$('body').fadeIn(300);
});
</script>
This achieves exactly what I want in Firefox, Safari and Chrome. However, Internet Explorer and Opera present a challenge: when the body fades in, all the elements of the JQuery gallery, included in the page, appear simultaneously, instead of rotating, as they do in "normal" browsers.
I'm posting the entire gallery script here:
/* Gallery */
jQuery.fn.gallery = function(_options){
// defaults options
var _options = jQuery.extend({
duration: 600,
autoSlide: false,
slideElement: 1,
effect: false,
fadeEl: 'ul',
switcher: 'ul > li',
disableBtn: false,
next: 'a.link-next, a.btn-next, a.next',
prev: 'a.link-prev, a.btn-prev, a.prev',
circle: true
},_options);
return this.each(function(){
var _hold = $(this);
if (!_options.effect) var _speed = _options.duration;
else var _speed = $.browser.msie ? 0 : _options.duration;
var _timer = _options.autoSlide;
var _sliderEl = _options.slideElement;
var _wrap = _hold.find(_options.fadeEl);
var _el = _hold.find(_options.switcher);
var _next = _hold.find(_options.next);
var _prev = _hold.find(_options.prev);
var _count = _el.index(_el.filter(':last'));
var _w = _el.outerWidth(true);
var _wrapHolderW = Math.ceil(_wrap.parent().width()/_w);
if (((_wrapHolderW-1)*_w + _w/2) > _wrap.parent().width()) _wrapHolderW--;
if (_timer) var _t;
var _active = _el.index(_el.filter('.active:eq(0)'));
if (_active < 0) _active = 0;
var _last = _active;
if (!_options.effect) var rew = _count - _wrapHolderW + 1;
else var rew = _count;
if (!_options.effect) _wrap.css({marginLeft: -(_w * _active)});
else {
_wrap.css({opacity: 0}).removeClass('active').eq(_active).addClass('active').css({opacity: 1}).css('opacity', 'auto');
_el.removeClass('active').eq(_active).addClass('active');
}
if (_options.disableBtn) {
if (_count < _wrapHolderW) _next.addClass(_options.disableBtn);
_prev.addClass(_options.disableBtn);
}
function fadeElement(){
_wrap.eq(_last).animate({opacity:0}, {queue:false, duration: _speed});
_wrap.removeClass('active').eq(_active).addClass('active').animate({
opacity:1
}, {queue:false, duration: _speed, complete: function(){
$(this).css('opacity','auto');
}});
_el.removeClass('active').eq(_active).addClass('active');
_last = _active;
}
function scrollEl(){
_wrap.animate({marginLeft: -(_w * _active)}, {queue:false, duration: _speed});
}
function toPrepare(){
if ((_active == rew) && _options.circle) _active = -_sliderEl;
for (var i = 0; i < _sliderEl; i++){
_active++;
if (_active > rew) {
_active--;
if (_options.disableBtn &&(_count > _wrapHolderW)) _next.addClass(_options.disableBtn);
}
};
if (_active == rew) if (_options.disableBtn &&(_count > _wrapHolderW)) _next.addClass(_options.disableBtn);
if (!_options.effect) scrollEl();
else fadeElement();
}
function runTimer(){
_t = setInterval(function(){
toPrepare();
}, _timer);
}
_next.click(function(){
if(_t) clearTimeout(_t);
if (_options.disableBtn &&(_count > _wrapHolderW)) _prev.removeClass(_options.disableBtn);
toPrepare();
return false;
});
_prev.click(function(){
if(_t) clearTimeout(_t);
if (_options.disableBtn &&(_count > _wrapHolderW)) _next.removeClass(_options.disableBtn);
if ((_active == 0) && _options.circle) _active = rew + _sliderEl;
for (var i = 0; i < _sliderEl; i++){
_active--;
if (_active < 0) {
_active++;
if (_options.disableBtn &&(_count > _wrapHolderW)) _prev.addClass(_options.disableBtn);
}
};
if (_active == 0) if (_options.disableBtn &&(_count > _wrapHolderW)) _prev.addClass(_options.disableBtn);
if (!_options.effect) scrollEl();
else fadeElement();
return false;
});
if (_options.effect) _el.click(function(){
_active = _el.index($(this));
if(_t) clearTimeout(_t);
fadeElement();
return false;
});
if (_timer) runTimer();
});
}
$(document).ready(function(){
$('div#gallery').gallery({
duration: 2000,
effect: 'fade',
fadeEl: 'ul.gall-inner > li',
next: 'a#next-btn',
prev: 'a#prev-btn',
autoSlide: 6000,
switcher: '.brands-list ul > li'
});
});
Could some knowledgeable person please help me to find a solution or a workaround? I'd be truly grateful!
I finally got the wonderful "quovolver" to work on my site and my testimonials are all rotating in a lovely way in my sidebar...
I would like however that instead of them running in the same order all the time ( the script for quovolver cycles through them in the order they are in in the html... ) that they be called up randomly by the script...
Is this possible??
Here is the script:
/**
* jQuery Quovolver 2.0.2
* https://github.com/sebnitu/Quovolver
*
* By Sebastian Nitu - Copyright 2012 - All rights reserved
* Author URL: http://sebnitu.com
*/
(function($) {
$.fn.quovolver = function(options) {
// Extend our default options with those provided.
var opts = $.extend({}, $.fn.quovolver.defaults, options);
// This allows for multiple instances of this plugin in the same document
return this.each(function () {
// Save our object
var $this = $(this);
// Build element specific options
// This lets me access options with this syntax: o.optionName
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
// Initial styles and markup
$this.addClass('quovolve')
.css({ 'position' : 'relative' })
.wrap('<div class="quovolve-box"></div>');
if( o.children ) {
var groupMethod = 'find';
} else {
var groupMethod = 'children';
}
// Initialize element specific variables
var $box = $this.parent('.quovolve-box'),
$items = $this[groupMethod](o.children),
$active = 1,
$total = $items.length;
// Hide all except the first
$items.hide().filter(':first').show();
// Call build navigation function
if ( o.navPrev || o.navNext || o.navNum || o.navText ) {
o.navEnabled = true;
var $nav = buildNav();
} else {
o.navEnabled = false;
}
// Call equal heights function
if (o.equalHeight) {
equalHeight( $items );
// Recalculate equal heights on window resize
$(window).resize(function() {
equalHeight( $items );
$this.css('height', $($items[$active -1]).outerHeight() );
});
}
// Auto play interface
if (o.autoPlay) {
var $playID = autoPlay();
if (o.stopOnHover) {
var $playID = stopAutoPlay($playID);
} else if (o.pauseOnHover) {
var $playID = pauseAutoPlay($playID);
}
}
// Go To function
function gotoItem(itemNumber) {
// Check if stuff is already being animated and kill the script if it is
if( $items.is(':animated') || $this.is(':animated') ) return false;
// If the container has been hidden, kill the script
// This prevents the script from bugging out if something hides the revolving
// object from another script (tabs for example)
if( $box.is(':hidden') ) return false;
// Don't let itemNumber go above or below possible options
if ( itemNumber < 1 ) {
itemNumber = $total;
} else if ( itemNumber > $total ) {
itemNumber = 1;
}
// Create the data object to pass to our transition method
var gotoData = {
current : $( $items[$active -1] ), // Save currently active item
upcoming : $( $items[itemNumber - 1] ) // Save upcoming item
}
// Save current and upcoming hights and outer heights
gotoData.currentHeight = getHiddenProperty(gotoData.current);
gotoData.upcomingHeight = getHiddenProperty(gotoData.upcoming);
gotoData.currentOuterHeight = getHiddenProperty(gotoData.current, 'outerHeight');
gotoData.upcomingOuterHeight = getHiddenProperty(gotoData.upcoming, 'outerHeight');
// Save current and upcoming widths and outer widths
gotoData.currentWidth = getHiddenProperty(gotoData.current, 'width');
gotoData.upcomingWidth = getHiddenProperty(gotoData.upcoming, 'width');
gotoData.currentOuterWidth = getHiddenProperty(gotoData.current, 'outerWidth');
gotoData.upcomingOuterWidth = getHiddenProperty(gotoData.upcoming, 'outerWidth');
// Transition method
if (o.transition != 'basic' &&
typeof o.transition == 'string' &&
eval('typeof ' + o.transition) == 'function' ) {
// Run the passed method
eval( o.transition + '(gotoData)' );
} else {
// Default transition method
basic(gotoData);
}
// Update active item
$active = itemNumber;
// Update navigation
updateNavNum($nav);
updateNavText($nav);
// Disable default behavior
return false;
}
// Build navigation
function buildNav() {
// Check the position of the nav and insert container
if ( o.navPosition === 'above' || o.navPosition === 'both' ) {
$box.prepend('<div class="quovolve-nav quovolve-nav-above"></div>');
var nav = $box.find('.quovolve-nav');
}
if ( o.navPosition === 'below' || o.navPosition === 'both' ) {
$box.append('<div class="quovolve-nav quovolve-nav-below"></div>');
var nav = $box.find('.quovolve-nav');
}
if ( o.navPosition === 'custom' ) {
if ( o.navPositionCustom !== '' && $( o.navPositionCustom ).length !== 0 ) {
$( o.navPositionCustom ).append('<div class="quovolve-nav quovolve-nav-custom"></div>');
var nav = $( o.navPositionCustom ).find('.quovolve-nav');
} else {
console.log('Error', 'That custom selector did not return an element.');
}
}
// Previous and next navigation
if ( o.navPrev ) {
nav.append('<span class="nav-prev">' + o.navPrevText + '</span>');
}
if ( o.navNext ) {
nav.append('<span class="nav-next">' + o.navNextText + '</span>');
}
// Numbered navigation
if ( o.navNum ) {
nav.append('<ol class="nav-numbers"></ol>');
for (var i = 1; i < ($total + 1); i++ ) {
nav
.find('.nav-numbers')
.append('<li>' + i + '</li>');
}
updateNavNum(nav);
}
// Navigation description
if ( o.navText ) {
nav.append('<span class="nav-text"></span>');
updateNavText(nav);
}
return nav;
}
// Get height of a hidden element
function getHiddenProperty(item, property) {
// Default method
if (!property) property = 'height';
// Check if item was hidden
if ( $(this).is(':hidden') ) {
// Reveal the hidden item but not to the user
item.show().css({'position':'absolute', 'visibility':'hidden', 'display':'block'});
}
// Get the requested property
var value = item[property]();
// Check if item was hidden
if ( $(this).is(':hidden') ) {
// Return the originally hidden item to it's original state
item.hide().css({'position':'static', 'visibility':'visible', 'display':'none'});
}
// Return the height
return value;
}
// Equal Column Heights
function equalHeight(group) {
var tallest = 0;
group.height('auto');
group.each(function() {
if ( $(this).is(':visible') ) {
var thisHeight = $(this).height();
} else {
var thisHeight = getHiddenProperty( $(this) );
}
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
// Update numbered navigation
function updateNavNum(nav) {
if (o.navEnabled) {
nav.find('.nav-numbers li').removeClass('active');
nav
.find('.nav-numbers a[href="#item-' + $active + '"]')
.parent()
.addClass('active');
}
}
// Update navigation description
function updateNavText(nav) {
if (o.navEnabled) {
var content = o.navTextContent.replace('#a', $active).replace('#b', $total);
nav.find('.nav-text').text(content);
}
}
// Start auto play
function autoPlay() {
$box.addClass('play');
intervalID = setInterval(function() {
gotoItem( $active + 1 );
}, o.autoPlaySpeed);
return intervalID;
}
// Pause auto play
function pauseAutoPlay(intervalID) {
if ( o.stopAutoPlay !== true ) {
$box.hover(function() {
$box.addClass('pause').removeClass('play');
clearInterval(intervalID);
}, function() {
$box.removeClass('pause').addClass('play');
clearInterval(intervalID);
intervalID = autoPlay();
});
return intervalID;
}
}
// Stop auto play
function stopAutoPlay(intervalID) {
$box.hover(function() {
$box.addClass('stop').removeClass('play');
clearInterval(intervalID);
}, function() {});
return intervalID;
}
// Transition Effects
// Basic (default) Just swaps out items with no animation
function basic(data) {
$this.css('height', data.upcomingOuterHeight);
data.current.hide();
data.upcoming.show();
if (o.equalHeight === false) {
$this.css('height', 'auto');
}
}
// Fade animation
function fade(data) {
// Set container to current item's height
$this.height(data.currentOuterHeight);
// Fade out the current container
data.current.fadeOut(o.transitionSpeed, function() {
// Resize container to upcming item's height
$this.animate({
height : data.upcomingOuterHeight
}, o.transitionSpeed, function() {
// Fade in the upcoming item
data.upcoming.fadeIn(o.transitionSpeed, function() {
// Set height of container to auto
$this.height('auto');
});
});
});
}
// Bind to the forward and back buttons
$('.nav-prev a').click(function () {
return gotoItem( $active - 1 );
});
$('.nav-next a').click(function () {
return gotoItem( $active + 1 );
});
// Bind the numbered navigation buttons
$('.nav-numbers a').click(function() {
return gotoItem( $(this).text() );
});
// Create a public interface to move to a specific item
$(this).bind('goto', function (event, item) {
gotoItem( item );
});
}); // #end of return this.each()
};
$.fn.quovolver.defaults = {
children : '', // If selector is provided, we will use the find method to get the group of items
transition : 'fade', // The style of the transition
transitionSpeed : 300, // This is the speed that each animation will take, not the entire transition
autoPlay : true, // Toggle auto rotate
autoPlaySpeed : 6000, // Duration before each transition
pauseOnHover : true, // Should the auto rotate pause on hover
stopOnHover : false, // Should the auto rotate stop on hover (and not continue after hover)
equalHeight : true, // Should every item have equal heights
navPosition : 'above', // above, below, both, custom (must provide custom selector for placement)
navPositionCustom : '', // selector of custom element
navPrev : false, // Toggle "previous" button
navNext : false, // Toggle "next" button
navNum : false, // Toggle numbered navigation
navText : false, // Toggle navigation description (e.g. display current item # and total item #)
navPrevText : 'Prev', // Text for the "previous" button
navNextText : 'Next', // Text for the "next" button
navTextContent : '#a / #b' // #a will be replaced with current and #b with total
};
})(jQuery);
and here is a very simple example of the html that works with it...
<div class="quovolver">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Sorry it took a bit longer than anticipated ;)
Let me know if this works for you.
You can replace your current Quovolver code with the following:
$(document).ready(function() {
var $items = $('.quovolver .quote');
var quovolver = $('.quovolver');
var newItems = [];
$.each($items, function(i, quote) {
var $copy = $(quote);
newItems.push($copy);
$copy.remove();
});
var random;
var chosenRandom = [];
for (var i = 0; i < newItems.length - 1; i++) {
random = Math.floor(Math.random() * newItems.length);
while ($.inArray(random, chosenRandom) != -1) {
random = Math.floor(Math.random() * newItems.length);
}
chosenRandom.push(random);
quovolver.append(newItems[random]);
}
$('div.quovolver').quovolver({autoPlaySpeed : 6000});
});
EDIT
To fix the overlapping divs, I have made a small adjustment in the code above, besides that, can you change the CSS Class testimonial_widget to include : overflow:hidden ? That will also aid in hiding the divs that are creeping over it.
Secondly the length of each div can be changed in the script above, when passing an object to quovolver, modify the following:
autoPlaySpeed : 6000 to however many (seconds * 1000) that you want it to wait.
Hope this helps ;)
I'm trying to build drop down options on mouse over and on click. The only problem I have with it, is when I put the mouse over an on child element, the menu gets hidden quickly.
jQuery code:
var navPos = $("#topNav").position().top; // ignore this line
// menu drop options
$('.repeat, .recitor, .volume, .bandwidthOption').bind('dropOption', function(e, force) {
var force = force || 'toggle';
if ($(this).hasClass('repeat'))
var optionName = 'repeat';
else if ($(this).hasClass('recitor'))
var optionName = 'recitor';
else if ($(this).hasClass('volume'))
var optionName = 'volume';
else if ($(this).hasClass('bandwidthOption'))
var optionName = 'bandwidthOption';
else
return;
var optionSubName = $(this).find('ul').attr('class');
var position = $(this).position();
position.top = navPos;
var isActive = $(this).hasClass('active');
if ((isActive && force != 'show') || (force && force == 'hide'))
{
$(this).removeClass('active');
$('.'+optionSubName).hide();
if (optionName == 'recitor') /* ie fix - z-index issue */
$('.logoBox').show();
}
else
{
$(this).addClass('active');
$('.'+optionSubName).show();
$('.'+optionSubName).css('left',position.left+'px');
if (optionName == 'recitor') /* ie fix - z-index issue */
$('.logoBox').hide();
}
});
$('.repeat, .recitor').click(function() {
$(this).trigger('dropOption');
return false;
});
$('.volume, .bandwidthOption').hover(function() {
$(this).trigger('dropOption', 'show');
},function() {
$(this).trigger('dropOption', 'hide');
});
Menu demo: http://jsbin.com/ozokir/2
The last bit is hiding the options:
$('.volume, .bandwidthOption').hover(function() {
$(this).trigger('dropOption', 'show');
},function() {
$(this).trigger('dropOption', 'hide');
});
Hover is only over the link option. To solve this you could use:
$('.volume, .bandwidthOption').mouseover(function() {
$(this).trigger('dropOption', 'show');
});
or click as you have in the previous line. Then you can hide with:
$('.dropOption').mouseout(function() {
$(this).trigger('dropOption', 'hide');
});
I have a bug in Javascript where I am animating the margin left property of a parent container to show its child divs in a sort of next/previous fashion. Problem is if clicking 'next' at a high frequency the if statement seems to be ignored (i.e. only works if click, wait for animation, then click again) :
if (marLeft === (-combinedWidth + (regWidth) + "px")) {
//roll margin back to 0
}
An example can be seen on jsFiddle - http://jsfiddle.net/ZQg5V/
Any help would be appreciated.
Try the below code which will basically check if the container is being animated just return from the function.
Working demo
$next.click(function (e) {
e.preventDefault();
if($contain.is(":animated")){
return;
}
var marLeft = $contain.css('margin-left'),
$this = $(this);
if (marLeft === (-combinedWidth + (regWidth) + "px")) {
$contain.animate({
marginLeft: 0
}, function () {
$back.fadeOut('fast');
});
} else {
$back.fadeIn(function () {
$contain.animate({
marginLeft: "-=" + regWidth + "px"
});
});
}
if (marLeft > -combinedWidth) {
$contain.animate({
marginLeft: 0
});
}
});
Sometimes is better if you create a function to take care of the animation, instead of writting animation code on every event handler (next, back). Also, users won't have to wait for the animation to finish in order to go the nth page/box.
Maybe this will help you:
if (jQuery) {
var $next = $(".next"),
$back = $(".back"),
$box = $(".box"),
regWidth = $box.width(),
$contain = $(".wrap")
len = $box.length;
var combinedWidth = regWidth*len;
$contain.width(combinedWidth);
var currentBox = 0; // Keeps track of current box
var goTo = function(n) {
$contain.animate({
marginLeft: -n*regWidth
}, {
queue: false, // We don't want animations to queue
duration: 600
});
if (n == 0) $back.fadeOut('fast');
else $back.fadeIn('fast');
currentBox = n;
};
$next.click(function(e) {
e.preventDefault();
var go = currentBox + 1;
if (go >= len) go = 0; // Index based, instead of margin based...
goTo(go);
});
$back.click(function(e) {
e.preventDefault();
var go = currentBox - 1;
if (go <= 0) go = 0; //In case back is pressed while fading...
goTo(go);
});
}
Here's an updated version of your jsFiddle: http://jsfiddle.net/victmo/ZQg5V/5/
Cheers!
Use a variable to track if the animation is taking place. Pseudocode:
var animating = false;
function myAnimation() {
if (animating) return;
animating = true;
$(this).animate({what:'ever'}, function() {
animating = false;
});
}
Crude, but it should give you the idea.
Edit: Your current code works fine for me as well, even if I jam out on the button. On firefox.