Develop Reference

Velocity.js leaving text artefacts on fade out

I am struggling to see why this leaves slight text fragments at the top of where an element has had the HTML replaced and then faded back in. This is the code:
$('.current-station-services li').on('click', function() {
$(this).find('.status').velocity({
opacity: 0
},{
duration: 100,
complete: function() {
$(this).html(data.test);
$(this).velocity({
opacity: 1
})
}
});
});
Here is an image also of the output (artefact above the 'yo!'):

This is a browser issue, not Velocity. Feel free to submit a bug report to webkit/gecko.

Laptop lid-open effect

I love the way the MacBook opens on the WhitePage (http://whitepagehq.com) homepage. I'd like to create a similar effect.
Is this created using CSS Animation, JQuery, or both? I can't seem to figure out from the Inspector. Have you seen a similar animation somewhere else?
How can I make something like this for my website?

There are two images:
<img src="lib/img/laptop-closed.png" class="lid-closed"/>
<img src="lib/img/laptop-open.png?1" class="lid-open"/>
The animation simply involves changing the laptop-open.png image's height on document ready.
This is done using jQuery (within the main page from line 126):
setTimeout(function () {
$('.lid-closed').animate({
top:10,
height:9,
width:840
}, {
easing:'linear',
duration:500
});
$('.lid-open').animate({
height:207
}, {
easing:'easeOutQuad',
duration:1000
});
}, 1000);

They are using jquery to animate the height of the open laptop image:
setTimeout(function(){
$('.lid-closed').animate({
top: 10,
height: 9,
width: 840
},
{
easing: 'linear',
duration: 500
});$('.lid-open').animate({
height: 207
},
{
easing: 'easeOutQuad',
duration: 1000
});
},
1000);

This code is done by jQuery.animate() method, you can find it in their inline js script. (View Source -> line 126). Basically they vary the height of the 'open' image at the same time as the 'closed' image. Open image expands and the closed part of the lid moves up.

jQuery rebind function

I want to have a div that animates the currently active image out of the view and instead animates in another image. There are several of these divs, and each one should have the same basic functionality but linked to different images. The problem I'm having is that you can click many of the divs before the animation is complete, which fires the other animations at the same time. My goal is to only be able to fire one animation at a time, and when the animation finishes you're able to fire the next animation. I've tried using unbind which works OK but then I'd have to rebind it later and I don't know how to do this. I'm really a jQuery noob so I would greatly apreciate an answer. Thanks!
My code:
$('.div1').click(function clickevent() {
$('.img2, .img3').animate({
opacity: 0.1,
left: 600
}, 1000, function() {
$('.img1').animate({
opacity: 1,
left: 0
}, 500, function() {
$('.div2, .div3').bind('click', clickevent); /* Here I want to rebind the function */
});
});
$(this).addClass("active");
$('.div2, div3').removeClass("active");
$('div2, .div3').unbind('click', clickevent);
});
I have two other codeblocks for .div2 and .div3 which look the same but with different classes in different places. Is there any way to make the images finish their animation before being able to animate again? Thanks.

Is this what you need:
var canAnimate = true;
$('.div1').click(function clickevent() {
// these 4 lines have to be in all code blocks (ie. for .div2 and .div3)
if (! canAnimate) {
return;
}
canAnimate = false;
$('.img2, .img3').animate({
opacity: 0.1,
left: 600
}, 1000, function() {
$('.img1').animate({
opacity: 1,
left: 0
}, 500, function() {
canAnimate = true; // this should also be included for .div2 and .div3 code blocks
});
});
$(this).addClass("active");
$('.div2, div3').removeClass("active");
});

I think queue() will append the animations but not stop them, so if you click 10 times on the images, the click handler will animate it 10 times but one after another. I guess you want only animate the images when no image is currenty animated so you can use:
$('.div1').click(function clickevent() {
// When no image is currently animated then perform the animation
if($j('.img1, .img2, .img3').is(':animated') == false)
{
$('.img2, .img3').animate({
opacity: 0.1,
left: 600
}, 1000, function() {
$('.img1').animate({
opacity: 1,
left: 0
}, 500);
});
$(this).addClass("active");
$('.div2, div3').removeClass("active");
} else {
// There is currently an animation runnig, do nothing
}
});
See this for more information: http://api.jquery.com/animated-selector/
You should also get some information about caching of selection results.

Galleria - imagePosition problem in IE8 (galleria.aino.se)

I have created a website for a makeup artist, and I am using Galleria to the portfolio. I have a problem with the imagePosition property in IE8. Even if i use imagePosition: 'center', is the image positioned to the left in IE8. (The other browsers centers the image)
Here is the code:
function initGalleria(){
$('#galleria').galleria({
debug:true,
imageCrop:'height',
imagePan:true,
imagePanSmoothness:10,
imagePosition:'center',
transition:'fade',
transitionSpeed:500,
idleTime:1000,
queue:false,
extend: function() {
this.attachKeyboard({
left: this.prev, // applies the native prev() function
right: this.next
});
this.addIdleState(this.get('thumbnails-container'), {
opacity: 0
});
this.addIdleState(this.get('info-link'), {
opacity: 0
});
}
});
}
... and a link to the website I'm working on.
Do you have any advice?
Thanks.

#swenedo I don't know what wrong with your code. It's absolute right. I tested it on Chrome 10, FF 4, IE 8 and it got nothing wrong. I posted a screen picture when I open your website on IE8, it's in center.

Jquery hover action diappears when going to next div

Im new to learning JQuery. Im doing a sample from JQuery Novice to Ninja and Im getting an error when I move my mouse over then next item. The #navigation_blob dissapears it could be a css problem for all I know but run the code tell me what you think I need to do. Im using the easing plugin
$(document).ready(function () {
$('<div id="navigation_blob"></div>').css({
width: $('#navigation li:first a').width() + 10,
height: $('#navigation li:first a').height() + 10
}).appendTo('#navigation');
$('#navigation a').hover(function () {
$('#navigation_blob').animate(
{ width: $(this).width() + 10, left: $(this).position().left },
{ duration: 'slow', easing: 'easeOutElastic', queue: false }
)
}, function () {
$('#navigation_blob')
.stop(true)
.animate(
{width: 'hide'},
{duration: 'slow', easing: 'easeOutCirc', queue: false}
)
.animate({
left: $('#navigation li:first a').position().left }, 'fast'
);
});
});
<style type="text/css">
#navigation li
{
display:inline-block
}
#navigation_blob
{
background-color:Blue; position:absolute; float:left
}
</style>
<ul id="navigation"><li>Home</li><li>About Us</li><li>Buy!</li><li>Gift Ideas</li></ul>

I think your problem is the width: 'hide' in the first .animate() of the second .hover() function:
//...
}, function () {
$('#navigation_blob')
.stop(true)
.animate(
{width: 'hide'},
//...
I think your blob will, essentially, have display: none; once that animation completes so further manipulations of its width or position will have no visible effect. If you say {width: 0} it should work okay: http://jsfiddle.net/ambiguous/YaVzd/
You can also try adding an explicit .show() before the hover-in animation but that produces some odd effects: http://jsfiddle.net/ambiguous/uH9yJ/1/

It looks like the version of jQuery is the culprit here. In this fiddle everything looks fine (using jQuery 1.4.2). However, if you change the version to 1.4.4 (the latest version), things start acting weird. Additionally, I downloaded the code from this book and it looks like the version of jQuery that this sample is using 1.4.
This makes sense if the author's update log is correct. According to the plugin's website, the last update was 12/11/07, which may mean development has stopped, but at the very least it probably means the plugin is out of date.
Hope that helps.