I am running jQuery Cycle for an image gallery. View the link: Here
My problem is that the images are getting squished when viewed in firefox. The problem disappears when I re-load the page. This leads me to believe that the Javascript is triggering before all the images are loaded (usually the first image works fine and the rest are squished.)
A hard re-fresh reproduces the problem.
I've wrapped everything in a $(document).ready(function(){ }); but it still happens.
Additional Info: If I specify the width and height of the image, everything works fine. However there are hundreds of images all at different sizes..
I'm pretty frustrated with this problem. Any ideas/help is greatly appreciated!
Here is my code:
$(document).ready(function(){
//function onBefore(curr,next,opts) {
// var $slide = jQuery(next);
// var w = $slide.outerWidth();
// var h = $slide.outerHeight();
// $slide.css({
// marginTop: (482 - h) / 2,
// marginLeft: (560 - w) / 2
// });
//};
// Decare the function that center the images...
function onBefore(curr,next,opts) {
var $slide = jQuery(next);
var w = $slide.outerWidth();
var h = $slide.outerHeight();
$slide.css({
marginTop: (480 - h) / 2,
marginLeft: (560 - w) / 2
});
};
$(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade',
next: '#next',
pause: 0,
speed: 500,
before: onBefore,
prev: '#prev',
pause: '#pause',
pager: '.thumbs',
pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();},
pagerAnchorBuilder: function(idx, slide) {
var src = $('img',slide).attr('src');
//Change height of thumbnail here
return '<li><img src="' + slide.src + '" height="90" /></li>';
}
});});});
There is a much simpler and cleaner solution that I used to solve this problem than what has already been proposed:
Using jQuery, you need to use $(window).load instead of $(document).ready for your particular situation. To fix the issue, change this:
$(document).ready(function() {
$('#slideshow').cycle({
/* ... */
});
});
To this:
$(window).load(function() {
$('#slideshow').cycle({
/* ... */
});
});
Why does this work? Because window.onload fires after all referenced images on the page are loaded (See https://developer.mozilla.org/en/DOM/window.onload, and .load() - jQuery API), which is the desired behavior in your situation. $(document).ready, better known as "DOM Ready", will fire before images have loaded. This is typically the desired behavior, but in your situation it's too early.
I had the same problem when working on a site several months ago (linked below). If you're starting cycle in $(document).ready(), here's what happens when a client browses to your page:
1) The client's browser sends a request for each img element. Those requests take variable amounts of time to fulfill.
2) Before the image requests are completed, cycle starts. Cycle works by hiding all but the first image in the slide show: it sets visibility:hidden and display:none on each of its images.
The problem is that Firefox fixes the img element's size once and for all at the point the display style is set to none. So if the image hasn't finished loading, its height and width style attributes are small (I'm not sure exactly what they correspond to - perhaps the size of Firefox's image placeholder). When cycle shows the image by setting its style attribute to display:block, it uses whatever dimensions it had at the time it was hidden.
I solved this by changing my code so that it doesn't start the cycle plugin until all the images are finished loading. To do that, I initialize a counter variable to the number of images I'm cycling, then bind a load event to each image like this:
var imagesRemaining = 12; // 12 is just the number of images in the slideshow div
$(document).ready(function() {
$('#slideshow > img').bind('load', function(e) {
imagesRemaining = imagesRemaining - 1;
if (imagesRemaining == 0) {
// I'm doing some other stuff when initializing cycle
startCycle();
// My images all start with visibility:hidden so they don't show
// before cycle hides them in a 'stack', so ...
$('#slideshow > img').css('visibility', 'visible');
}
});
});
function onBefore(curr, next, opts) { // Your code here ... }
function startCycle() {
$('#slideshow').cycle({ ... // your initialization here });
}
You can see it in action by viewing the galleries on this site in Firefox. I'm building the gallery pages dynamically, so it's structured a bit differently than your page, but you can see more details if you poke around with Firebug.
I'd also like to add that it seems adding a width and height attribute solves this problem.
Ok i know its probably an awfull way of calling load but i just coulnd bind my cycle code to .load for some reason it just don't work so i called the whole Cycle initializer inside the ...
i couldn't force the sizes since i'm cycling through li containing dynamic images and data
its probably flawed at some extend but for those as desperated as me...
Josh, your solution has just saved me a headache, thank you very much!
I think i've amended it slightly in order to handle pages where you don't know the total number of images. It seems to be working fine for me, if anyone can see any flaws, please point them out - i'm still learning.
$(document).ready(function () {
$('#slideshow > img').each(
function go() {
$(this).bind('load', function (e) {
projects();
$('#slideshow > img').css('visibility', 'visible');
});
});
});
function projects() {
$('#slideshow').cycle({
fx: 'scrollHorz',
speed: 300,
timeout: 0,
next: '#next ',
prev: '#prev ',
after: onAfter,
nowrap: 1,
autostop: 1
});
}
If you're using a database to populate the slideshow you could try accessing the image dimensions from the image itself.
For example, using django you can use
width="{{ xxx.image.width }}px" height="{{ xxx.image.height }}px"
in your img tag.
You can use a solution similar to making youtube videos responsive. You need to know the ratio of your width to height, and add that as padding-bottom to the cycling div. For my 1024X680 photos, I used 680/1024 = 66.4%
In your case, I believe
#slideshow{
padding-bottom:66.4%;
}
will show the image unshrunk. I have no idea what the actual height and width values you are working with, so substitute your own. I had to use this solution when the $(window).load solution proved maddeningly ineffective -- so now I use both.
This is better than setting the dimensions of the image, because it's slides into a fluid, responsive enviroment.
Related
Imagine you have a single item carousel that sits at the absolute top of the page. Under that, you have the rest of your content. As the carousel is nested arbitrarily deep in the page, you've set it up to be absolutely positioned. But now you need to know how high the carousel is so you can put a top margin on the rest of the content so it does not overlap. This is what I am doing.
$('#carousel').owlCarousel({
items: 1,
onInitialized: adjustStretchHeader,
onResized: adjustStretchHeader
});
function adjustStretchHeader () {
setTimeout(function () {
return $('.page > .container')
.css('margin-top', $('.page > .stretch-header')
.height() + 15);
}, 250);
}
On the initialisation of the carousel and on resize events, I am getting it to get the carousel's height and update the top margin. The problem is that, without having a delay, the initialized event is triggering before the carousel is fully drawn on the page, so the height is unreliable.
With a delay, I'm able to get it properly. But this is obviously a hack, and I cannot guarantee that on slower devices, the carousel will have been drawn in time.
I cannot see any other useful events in the documentation.
Demonstration fiddle
You can use jQuery's get() method to grab the height of the images (even when they're hidden). This is independent of owlCarousel so don't have to wait for it to finish loading!
var images = $('#carousel img');
var firstImgHeight = images.get(0).height;
$('.page > .container').css('margin-top', firstImgHeight + 15);
Looking through the docs and the demos, I found this page: http://www.owlcarousel.owlgraphic.com/demos/events.html
It shows that the onRefreshed event is called after onInitialized and after the images have loaded. You can use that.
$('#carousel').owlCarousel({
items: 1,
onRefreshed: adjustStretchHeader
});
function adjustStretchHeader () {
return $('.page > .container')
.css('margin-top', $('.page > .stretch-header')
.height() + 15);
}
Fiddle
Although, I agree that the Docs aren't great at explaining the flow of the events. This still feels like a hack to me.
After initialization of carousel, DOMs of images have width but they don't have height until images are actually loaded. Try to use (width)*(aspect ratio) instead of height.
function adjustStretchHeader() {
return $('.page > .container')
.css('margin-top', $('.page > .stretch-header')
.width() * aspectratio + 15);
}
I am using bxSlider and it's working great...I'm having a slight issue with some functionality...when I view the slideshow on mobile it shows 1.5...basically one full slide and then part of the next one. In the code, I have minSlides set to 1 and maxSlides set to 3...what I'd like to do is have bxSlider display a particular li only if the entire li will fit on the screen. For example, my div's are 300px wide, in order to show two of them your screen size would have to be at least 600px wide...is that possible?
I created a fiddle: https://jsfiddle.net/785gcrnp/.
The example page is: http://joshrodg.com/hallmark/ - all the way on the bottom in the dark area where it says "Latest Media".
Thanks,
Josh
Nice, looks like you've made some good progress. There is a way you can wrap your current code in a function and call it when the window resizes or orientation changes.
Here's what it would look like wrapped in a function:
function adjustSlider(){
var sw = 200;
var sm = 20;
var ms = Math.floor($('#nocrop').width() / (sw + sm));
$('#nocrop .bxslider').bxSlider({
pager: false,
slideWidth: sw,
slideMargin: sm,
maxSlides: ms > 1 ? ms : 1,
});
}
Then, we need to call this function when the document first loads, otherwise your calculations will only get used when the window resizes:
$(document).ready(function(){
adjustSlider();
});
Then, we add a window resize event. I place the call to the adjustSlider fucntion inside a timer so it helps if the window is resized a bunch within a short amount of time. We can also add the onorientationchange event in here too that makes the same call. Orientation changes have their own delays built in and this event doesn't fire off as frequently as window resize, so I didn't put this in a timer.
$(window).resize(function(){
setTimeout(function(){
adjustSlider();
}, 250);
});
window.onorientationchange = function(event){
adjustSlider();
}
250 ms for the timer might be a little high, feel free to adjust this. It still feels pretty weighty to me when resizing the panes on jsfiddle. This could be due to how the javascript is being run inside jsfiddle, or it could have something to do with the way this slider is handling having it's properties set. It will show best on your actual site, so do some testing there to be sure speed and performance don't become an issue with this. Let me know how it goes!
Also, here is a working jsfiddle for an example of how it all looks when put together: http://jsfiddle.net/sm1215/0517f76w/4/
edit: words, woops also placed the onorientationchange inside the resize event, which wouldn't work. This is fixed and I've updated the fiddle.
A friend of mine helped me get this working!
I have updated the fiddle: https://jsfiddle.net/785gcrnp/1/
var sm = 20;
var podcastSlider;
function podcastSettings() {
var minmax;
var win=$(window).width();
if(win > 960) {
minmax=3;
var sw = 300;
} else if(win > 660) {
minmax=2;
var sw = 300;
} else {
minmax=1;
var sw = 480;
}
var sliderSettings={
adaptiveHeight: true,
infiniteLoop: false,
maxSlides: minmax,
mode: 'horizontal',
nextSelector: '.next',
nextText: 'Next',
pager: false,
prevSelector: '.prev',
prevText: 'Prev',
slideMargin: sm,
slideWidth: sw
};
return sliderSettings;
}
$(window).resize(function() {
podcastSlider.reloadSlider(podcastSettings());
});
$(document).ready(function(){
podcastSlider = $('.podcast').bxSlider(podcastSettings());
});
This will center the slides and only show the amount of slides that will be fully visible without cutting anything off.
This is also responsive, so if I resize the browser everything will update as it should.
In addition, I specified a different width for smaller screens.
I hope this helps someone else!
Thanks,
Josh
I want a simple image crossfade, similar to http://malsup.com/jquery/cycle/, but with a pre-loader. Is there a good jQuery plugin that does both? Also, I'm not looking for a load bar.
This question is close, but not the same => jQuery Crossfade Plugin
It would be great if it was a solution that defaulted to CSS3, but would otherwise fall back to JS to keep the processing native as possible.
Looking for something that..
will autoplay
without controls
will go to the next image based on time setting, ie. 5 seconds, unless the next image isn't loaded in which case it finishes loading the image and then displays it.
crossfade transition, not fade to black or white, but cross-fade. from the start it would fadein.
no thumbnails or galleries, etc. just the image
If images could be CSS background images, that would be best, so users can't drag out the image simply
Each panel needs to be clickable so a user could click the image and go to a part of the website.
Well, here's my poke at it. The preloader is in vanilla js and the slideshow loop is in jQuery. It's very simple to implement and the concept is even simpler.
Demo
a very simple Demo that illustrates the DOM manipulation approach
HTML
<!-- not much here... just a container -->
<div id="content"></div>
CSS
/* just the important stuff here. The demo has example styling. */
#content
{
position:relative;
}
#content img
{
position:absolute;
}
javascript/jQuery
// simple array
var images = [
"http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_003t.jpg",
"http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_005t.jpg",
"http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_001t.jpg"
];
// some adjustable variables
var delay = 2000;
var transition = 1000;
// the preloader
for(var i in images)
{
var img = document.createElement("img");
img.src = images[i];
img.onload = function(){
var parent = document.getElementById("content");
parent.insertBefore(this,parent.childNodes[0]);
if(i == images.length - 1)
{
i = 0;
startSlides();
}
}
}
// and the actual loop
function startSlides()
{
$("#content img:last").delay(delay).fadeTo(transition,0,function(){
$(this).insertBefore($(this).siblings(":first")).fadeTo(0,1);
startSlides();
});
}
The concept in brief is to fade the first image in a container, once complete change it's position in the DOM (effectively hiding it behind equal tree level siblings), and call the function again. The reason why this works is because it only fades the first child of the container, but on callback it changes what node that is constantly looping the nodes. This makes for a very small source file that is quite effective.
EDIT 1:
and 32 minutes tweaking later...
Demo 2
EDIT 2:
My oh so simple script is now very complicated :P I added in some scaling features that only work on modern browsers but are there if needed. This one also has a loading bar as it preloads the images (may or may not be desirable :P)
small images demo
large images demo
I think you can still do this with the jQuery cycle plugin; other than image preloading, even the jQuery cycle lite version does everything you want by default out-of-the-box.
And if you look here, you'll see that it's pretty simple to add a little Javascript that will add images (after the first two) as they load. You would need to modify the code a little (instead of stack.push(this), you'd want something like stack.push("<div style="background-image:url("+img.src+")"></div>"), for example) but I think it's totally doable.
Edit: here's a link to a SO question about how to make a div into a clickable link.
Edit 2: I liked Joseph's idea to just move the elements to a hidden DIV, so I updated my code a bit. It now also preserves the links each div points to as well: http://jsfiddle.net/g4Hmh/9/
Edit 3: Last update! http://jsfiddle.net/g4Hmh/12/
UPDATE Added the ability to load everything asynchronously.
A wrapper for the jQuery cycle plugin should suffice. You really just need something that monitors if the images loaded and then calls $(elem).cycle(/* options */). Here's my take:
$.fn.cycleWhenLoaded = function(options) {
var target = this,
images = options.images,
loaded = 0,
total = 0,
i;
if(images) {
for(i = 0; i < images.length; i ++) {
$('<img/>').attr('src', images[i]).appendTo(target);
}
}
this.find('> img').each(function(index) {
var img = new Image(),
source = this;
total ++;
if(index > 1)
$(this).hide();
img.onload = function() {
loaded ++;
if(loaded == total) {
target.trigger('preloadcomplete');
target.cycle(options);
}
};
setTimeout(function() {img.src = source.src}, 1);
});
return this;
};
This allows you to either do a simple delay load:
$('.slideshow').cycleWhenLoaded({
fx: 'fade'
});
Or you can do something more complicated and load your images in the script and capture the preload complete event:
$('.slideshow2').hide().cycleWhenLoaded({
fx: 'fade',
images: [
"http://cloud.github.com/downloads/malsup/cycle/beach1.jpg",
"http://cloud.github.com/downloads/malsup/cycle/beach2.jpg",
"http://cloud.github.com/downloads/malsup/cycle/beach3.jpg",
"http://cloud.github.com/downloads/malsup/cycle/beach4.jpg",
"http://cloud.github.com/downloads/malsup/cycle/beach5.jpg"
]
}).bind('preloadcomplete', function() { $(this).show(); });
You can see it in action here: http://fiddle.jshell.net/vmAEW/1/
I don't know how close this is to what you are looking for, but I figured since no one else did I would at least try to help. http://galleria.aino.se/
It at least has a preloader and a fade transition.
I need to adjust canvas size after updating content of a page. I can do it explicitly by
FB.Canvas.setSize({ width: 760, height: 1480 });
however, it doesn't work without parameters, i.e. .setSize().
Also, I can adjust the height by
FB.Canvas.setAutoResize(true);
but only increasing - it doesn't reduce the height when content is reduced.
The following lines do not work:
FB.Arbiter.inform("setSize", FB.Canvas._computeContentSize());
FB.Canvas.setSize(FB.Canvas._computeContentSize());
How can one make it working?
Some more comments on the subject:
http://developers.facebook.com/blog/post/93
http://developers.facebook.com/docs/reference/javascript/fb.canvas.setautoresize
Related:
facebook-api: what's Facebook Connect cross-domain receiver URL?
facebook-app: how can i change the height of a resizeable iframe application?
Document height grows on resize when setting canvas dimensions dynamically
How do you control the size of your Facebook Canvas apps?
Don't write your own function for timed Auto-resize. Fb has one:
FB.Canvas.setAutoResize();
If you know when you need to resize it use
FB.Canvas.setSize()
So, if you want to make is smaller when you click a link, stick it in a function and then call that function later like:
function sizeChangeCallback() {
FB.Canvas.setSize();
}
//start some function or on click event - here i used jquery
$("#something").click(function() {
sizeChangeCallback()
});
You don't need to set an explicit height, but sometimes you can have trouble with dynamic xfbml elements like the comments plugin. Try using an event subscribe callback:
FB.Event.subscribe('xfbml.render', function(response) {
FB.Canvas.setAutoResize();
});
http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/
http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoResize/
http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
I have managed to make .setSize() working by delaying its execution (as suggested on various forums):
window.setTimeout(function() {
FB.Canvas.setSize();
}, 250);
If you have XFBLM elements, especially fb:comments, then you need to parse the page before setting its size
window.setTimeout(function() {
FB.XFBML.parse();
FB.Canvas.setSize();
}, 250);
Note, that you need to run this script after your content block, otherwise increase the time interval (in ms) allowing webserver and client browser building the content before resizing canvas.
This approach only increases the height of your page and doesn't decrease it. You can achieve decreasing manually by firing the following line before the code above
FB.Canvas.setSize({height: 480}); // min height - .setSize() won't reduce it
however, there is a drawback - the page will be blinking due to the double resizing.
Also, one suggests running .setSize in several time intervals to account delayed content:
FB.Array.forEach([300, 600, 1000, 2000], function(delay) {
setTimeout(function() {
FB.XFBML.parse();
FB.Canvas.setSize();
}, delay)
});
In this case, the page and XFBML elements become quite blinky.
We have pages in our iframe that append content to the page and then allow the user to refresh the content within the page in place. In these cases, we saw the same thing, where the content would not shrink when appropriate.
FB.Canvas.setSize() calls _computeContentSize, which is shown below:
_computeContentSize: function() {
var body = document.body,
docElement = document.documentElement,
right = 0,
bottom = Math.max(
Math.max(body.offsetHeight, body.scrollHeight) +
body.offsetTop,
Math.max(docElement.offsetHeight, docElement.scrollHeight) +
docElement.offsetTop);
if (body.offsetWidth < body.scrollWidth) {
right = body.scrollWidth + body.offsetLeft;
} else {
FB.Array.forEach(body.childNodes, function(child) {
var childRight = child.offsetWidth + child.offsetLeft;
if (childRight > right) {
right = childRight;
}
});
}
if (docElement.clientLeft > 0) {
right += (docElement.clientLeft * 2);
}
if (docElement.clientTop > 0) {
bottom += (docElement.clientTop * 2);
}
return {height: bottom, width: right};
},
The problematic line is here:
bottom = Math.max(
Math.max(body.offsetHeight, body.scrollHeight) +
body.offsetTop,
Math.max(docElement.offsetHeight, docElement.scrollHeight) +
docElement.offsetTop);
Even if the content inside your iframe has shrunk, the value of body.offsetHeight will not shrink.
To solve this, we made a custom version of the computeContentSize function that only consults the docElement for height, like so:
function rfComputeContentSize() {
var body = document.body,
docElement = document.documentElement,
right = 0,
bottom = Math.max(docElement.offsetHeight, docElement.scrollHeight) + docElement.offsetTop;
if (body.offsetWidth < body.scrollWidth) {
right = body.scrollWidth + body.offsetLeft;
} else {
FB.Array.forEach(body.childNodes, function(child) {
var childRight = child.offsetWidth + child.offsetLeft;
if (childRight > right) {
right = childRight;
}
});
}
if (docElement.clientLeft > 0) {
right += (docElement.clientLeft * 2);
}
if (docElement.clientTop > 0) {
bottom += (docElement.clientTop * 2);
}
return {height: bottom, width: right};
}
Anytime we want to resize and know that the content could shrink we'll use the custom function to pass content to setSize (e.g. FB.Canvas.setSize(rfComputeContentSize())), and anytime we know that the content will only grow, we'll use the standard FB.Canvas.setSize() function.
Note that we were using setAutoGrow() and I didn't check, but am assuming that it uses the same function to determine size. We disabled our call to setAutoGrow() and will have to be vigilant about calling setSize() at approrpriate times.
Logged this bug with Facebook: https://developers.facebook.com/bugs/228704057203827
We ran into an issue where their FB.Canvas functions didn't work, although everything was properly initialized, because they’re using ‘IFRAME’ instead of iframe in their cross-domain JS setup, hence no XHTML compatibility.
We fixed this by prototyping our own createElement function and overriding theirs.
Just put this right after you include Facebooks all.js:
document.__createElement = document.createElement;
document.createElement = function(tagName) {
return document.__createElement(tagName.toLowerCase());
}
bit of excess functionality, but this article explains why you cant do that dynamically and provides the easiest solution...
http://www.twistermc.com/36764/shrink-facebook-tabs/
The answer is simple:
Shrink it really small, then after a pause use AutoGrow to make it the correct size... Alice in Wonderland style.
I say easiest because from a dev and user point of view this slows things down by about 1/4 second, and the user gets a tiny flash of the scrollbars...
Bobby's answer is very good. Only thing I would add to it is that some people have had success getting the page to shrink by doing the following:
FB.Canvas.setSize({ width: 760, height: 10 });
And then follow it with:
FB.Canvas.setAutoResize();
You don't have to use 10, just something smaller than the minimum size of your page. Then the FB.Canvas.setAutoResize() should go ahead and make it the proper height again and continue to update. The only time you need to call FB.Canvas.setSize({ width: 760, height: 10 }); again would be if the content shrunk again.
The danger of doing this is that if the FB.Canvas.setAutoResize(); doesn't work, you could have content that is cut off.
None of this worked for me. Make sure to type this before the closing tag.
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
//Der folgende Code ändert die Grösse des iFrames alle 100ms
FB.Canvas.setAutoResize(100);
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
I tried to use FB.Canvas.setSize(e); to resize my app, but it did not resize at all.
I took a look in the Facebook Javascript and found out, that FB.Canvas.setSize calls the FB.Arbiter.inform('setSize',e) function.
If I call the FB.Arbiter.inform('setSize',{ width: 760, height: 1480 }) function right from my code, the canvas resizes correctly.
This has worked for me:
<script type='text/javascript'>
window.onload=function() {
FB.Canvas.setSize({width:760,height:document.body.offsetHeight});
}
</script>
Note that you don't need FB.init unless you are using it for other reasons.
When resizing to the minimum height do not forget to make it a little bit bigger than it is, to account for horizontal scrolling bar and some extra pixels that some browsers add, otherwise you will end-up with vertical scroll.
Also I do not recommend to use body to count height.
This worked for me :
window.fbAsyncInit = function()
{FB.Canvas.setSize({height:document.getElementById('m_table').offsetHeight+40});}
where m_table is table ID with all my content (you can use div instead).
Im trying to create a custom horizontal accordion style showcase. In terms of actual functionality, i have the framework (which can be seen here):
http://www.jsfiddle.net/adrianjacob/UdUus/
However my main bug bear (and the clients) is that if you look at the right hand side, there is always slight movement/flickering as the widths animate up and down.
Ideally I want it to appear smooth so only the opening/closing lists have movement.
ANy advice would be much appreciated.
A.
Use the animate function's step (it's not well documented)... I've updated the demo
var panels = $('#promo li');
panels.hoverIntent(
function() {
if (!$(this).is('.expanded') && !panels.is(':animated')) {
$(this).animate({
width: 200
}, {
// width is the calculated width, ani is the animation object
step: function(width, ani) {
var w = Math.floor(width);
// use 250 so we end up with 50 as the reduced size
$('.expanded').css('width', (250 - w) + 'px');
$(ani.elem).css('width', (200 - w) + 'px');
},
duration: 500,
complete: function() {
panels.removeClass('expanded');
$(this).addClass('expanded');
}
});
}
}, function() {});
A similar method is used in the Kwicks plugin.
You could try this plugin which may have figured out the bug. The example provided was too showy to actually tell.
Have you played around with jQuery UI easings?
You can also try to stop the event just when the div is opening.
The website with explanation is: http://api.jquery.com/stop/