Develop Reference

override fadeout() display: none

Have a fiddle here:
http://jsfiddle.net/BP6rq/1514/
Fades my element out and puts it in a fixed position once it has reached the necessary point. I am using fadeOut() for the back-in effect. The problem is I do not want it to hide. I know about fadeTo, however I haven't been able to achieve that same effect. I've also tried overriding the display: none, but that eliminates the functionality of the fade effect. What can I do to maintain the fade effect, but not have fadeOut() disappear when scrolled back up and back to its original position?
Thoughts?

Use animate() together with css opacity instead of fadeIn fadeOut:
jsFiddle Demo
$(window).bind("scroll", function () {
$.fx.speeds.xslow = 250;
if ($(this).scrollTop() > 50) {
$('#bottomcta')
.animate({
'opacity': 1
},1000)
.addClass('fixed');
} else {
$('#bottomcta')
.animate({
'opacity': 0
},1000)
.removeClass('fixed');
}
});

Animating elements jquery

I have a slide show that cycles through images, and then above those images I have some text and then two images. What I am wanting to is work out which images I am trying to animate and do so, however I want to have a delay between each animation.
My difficulty is that I have 3 slides, and each slide can have 2 images that need to be animated seperatly to the background, the slides are arranged are arranged based around the users preferences so from a front end point of view, I can never be 100% sure what two images will be grouped together, for that reason, I have written the following,
if($(".current .iphone").length) {
$(".current .iphone").animate({
opacity : 1,
left : "840px"
}, 800);
}
if($(".current .blackberry").length) {
$(".current .blackberry").animate({
opacity : 1,
left : "1119px"
}, 800);
}
if($(".current .samsung").length) {
$(".current .samsung").animate({
opacity : 1,
left : "783px"
}, 800);
}
if($(".current .htc").length) {
$(".current .htc").animate({
opacity : 1,
left : "900px"
}, 800);
}
if($(".current .nokia").length) {
$(".current .nokia").animate({
opacity : 1,
left : "823px"
}, 800);
}
if($(".current .nokia").length) {
$(".current .nokia").animate({
opacity : 1,
left : "823px"
}, 800);
}
And here is my HTML,
<div id="slideshow" role="main" style="position: relative; overflow: hidden; ">
<section data-background="_/images/elements/parralex-1.jpg">
<img src="_/images/iphone-blue.png" alt="iPhone mybunjee" class="iphone foreground phone" />
<img src="_/images/blackberry-pink.png" alt="Blackberry mybunjee" class="blackberry background phone" />
</section>
<section data-background="http://www.samtordoffracing.com/wp-content/uploads/2012/07/Tordoff-14.jpg">
<img src="_/images/iphone-blue.png" alt="iPhone mybunjee" class="iphone foreground phone" />
<img src="_/images/blackberry-pink.png" alt="Blackberry mybunjee" class="blackberry background phone" />
</section>
<section data-background="http://www.samtordoffracing.com/wp-content/uploads/2012/07/Tordoff-14.jpg">
<div class="samsung foreground"></div>
<div class="nokia foreground"></div>
</section>
</div>
Basically what I am doing is trying to work out which images are present in the current slide, and then animate then, however currently both images animate at the same time, and I want to have a random delay between one image being animated and then the next.
Is there a better way to do what I am doing?

You could try something like:
$.each($('#slideshow').find('img'), function(i, img){
if($(img).hasClass('iphone')){
setTimeout(
function(){
$(img).animate({
opacity : .5,
'margin-left' : "+=40px"
}, 800)
}, Math.random() * i *800);
}
if($(img).hasClass('blackberry')){
setTimeout(
function(){
$(img).animate({
opacity : .5
'margin-left' : "-=40px"
}, 800)
}, Math.random() * i *800);
}
});
Anyway here there are some example, look THIS for example.

I coundn't fully understand what are you trying to do but i changed your jQuery structure.
You need to define a trrigger/event for this action, like hover(), or click()
use this for less code:
$('.current').hover(function() {//mouse over event
var currentClass = $(this).children().attr('class');//takes mouse overed element's chlid's class
if($('.current .'+currentClass).length) {
$(".current ."currentClass).animate({
'opacity' : '1',
'left' : '840px'
}, 800);
}
});
if you dont want to define trigger events, you can use each() method with setInterval() for timed animation.

jQuery animation perform poorly all over. How can I make it smoother?

I tried to emulate the effect in the slider on this site: http://metalabdesign.com/
Here's the animation code:
$('.tagLink').click(function () {
$('html').css('overflow', 'hidden');
$('#tagBoxOverlay').show().stop(1).fadeTo(200, .9)
$('#tagBox').show().stop(1).animate({
marginTop: '-37.5%',
marginLeft: '-37.5%',
height: '75%',
width: '75%',
opacity: 1
}, {
duration: 200,
specialEasing: {
opacity: 'linear',
width: 'linear',
height: 'linear',
marginLeft: 'linear',
marginTop: 'linear'
},
complete: function () {
$(tagBoxContents).fadeTo(200, 1);
$('#tagBoxPopularWrapper').height($('#tagBox').height() - $('#tagBoxDescription').height() - 1);
$(window).resize(function () {
$('#tagBoxPopularWrapper').height($('#tagBox').height() - $('#tagBoxDescription').height() - 1)
});
}
});
tagBoxOverflow and tagBox start out 100% width & height. Overlay fades in, and the box both fades in and shrinks.
Here's a site where you can see it live: http://hashtraffic.com/
Hit "begin" then click "hipsters" and it will do the animation.
Why is it so slow? Here's a link to the RAW JS:
http://hashtraffic.com/js/HashTraffic.js
I'm so lost here. I understand I'm asking a lot of the browser, but metalabs does it just fine! Would it be smoother if I used CSS animations with js fallback?

Definately smoother to use css3 transitions (but IE does not reward us for this).
But I think a major problem is your margins.
I would make it position: absolute. and animate top right bottom and left.
With what your doing,the browser is forced to reflow the entire page, but if you make the position absolute, resizing does not effect the containing element or any of its parents.

Div slideLeft.. Like slideDown or slideUp

I want to slideLeft a div with jquery.. But like slideDown and slideUp or slideToggle.. How Can I do?

Here's a quick jQuery plugin that might help ?
jQuery.fn.slideLeftHide = function( speed, callback ) {
this.animate({
width: "hide",
marginLeft: "hide",
marginRight: "hide"
}, speed, callback );
}
jQuery.fn.slideLeftShow = function( speed, callback ) {
this.animate( {
width: "show",
marginLeft: "show",
marginRight: "show"
}, speed, callback );
}
To be used like so:
$("#elemID").slideLeftHide(300);
and a FIDDLE for demonstation!

Make an animation that use .animate() to reduce the width to 0:
$('#my-id').animate({ width : 0 }, 1000); // slide left the div
Slide right is more complicated...

This can work if your div has an overflow:hidden
$("#test").animate({width:0},500,function(){$(this).hide()})

AnythingSlider with fade effect

I'm using the anythingSlider by Chris Coyier.
Can anyone tell how to change from slide effect to fade effect?
Regrets,
Saulo

Well, as the core is at this time (v1.5.6.1), it isn't possible to transition between the two slides in a fade transition, but you can use the FX extension to fade in the next image. Try something like this:
$('#slider')
.anythingSlider({
animationTime : 0
})
.anythingSliderFx({
inFx: {
'img' : { opacity: 1, duration: 500 }
},
outFx: {
'img' : { opacity: 0, duration: 0 }
}
Setting "animationTIme" and the outFx time to zero will ensure the previous image isn't seen (no sliding), but the inFx (fadeIn) will be on a transparent background. I don't know if that will fullfill your needs.