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');
}
});

Metafizzy isotope - entering animation

All the information I can find about animating in isotope is for version 1: http://isotope.metafizzy.co/v1/docs/animating.html
There doesn't seem to be any documentation for isotope 2.
Does anyone know how I could change the appended entering animation? At the moment it's a scale transition from 0 to the appropriate size: see example here: http://isotope.metafizzy.co/v1/demos/infinite-scroll.html

Use thevisibleStyle, hiddenStyle and transitionDuration options:
For example, to slowly fade in/out without scale:
var isotope = new Isotope(someElement, {
hiddenStyle: { opacity: 0 },
visibleStyle: { opacity: 1 },
transitionDuration: '2s'
})
Example
Source: Isotope Options documentation.

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.

how can i slideDown A Hidden element from 0 opacity to 1 with jquery

i have a coke like below that using jquery prototype Library:
new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })
this code force the imageDataContainer element to sliding Down From 0 Opacity To 1 Opacity.
how can i implement upper codes with new downloaded jquery library from jquery.com web site?
the syntax of slideDown is like this :
http://www.w3schools.com/jquery/eff_slidedown.asp
i know how slideDown And fadeTo Functions Work in jquery / but how can i combine them like the upper codes?
i test the below code - but u can not changing the opacity --DURING-- toggle :
$('#lightbox-container-image-data-box').animate({
opacity: 0,
height: 'toggle',
opacity: 1
}, 400, function() {
// Animation complete.
});
thanks 4 attention

Use animate() for that. With animate you can animate any arbitrary number of properties on an element.
Check a demo of the code below here: http://jsfiddle.net/chrisramakers/8ewEp/
$('#book').hide();
$('#book').animate({
opacity: 'toggle',
height: 'toggle'
});

Fading visibility of element using jQuery

I'm having some trouble with finding the visibility param for JQuery.
Basically... the code below does nothing.
$('ul.load_details').animate({
visibility: "visible"
},1000);
There's nothing wrong with the animate code (I replaced visibility with fontSize and it was fine. I just can't seem to find the correct param name equivalent for "visibility" in css.

You could set the opacity to 0.0 (i.e. "invisible") and visibility to visible (to make the opacity relevant), then animate the opacity from 0.0 to 1.0 (to fade it in):
$('ul.load_details').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});
Because you set the opacity to 0.0, it's invisible despite being set to "visible". The opacity animation should give you the fade-in you're looking for.
Or, of course, you could use the .show() or .fadeTo() animations.
EDIT: Volomike is correct. CSS of course specifies that opacity takes a value between 0.0 and 1.0, not between 0 and 100. Fixed.

Maybe you are just looking to show or hide an element:
$('ul.load_details').show();
$('ul.load_details').hide();
Or do you want to show/hide element using animation (this doesn't make sense of course as it will not fade):
$('ul.load_details').animate({opacity:"show"});
$('ul.load_details').animate({opacity:"hide"});
Or do you want to really fade-in the element like this:
$('ul.load_details').animate({opacity:1});
$('ul.load_details').animate({opacity:0});
Maybe a nice tutorial will help you get up to speed with jQuery:
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

You can't animate visibility. Either something is visible, or it's not (event 1% opaque items are 'visible'). It's much like half-existing - doesn't make sense. You're likely better off animating the opacity (via .fadeTo() etc).

This might help:
$(".pane .delete").click(function(){
$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
});

This is what worked for me (based on #Alan's answer)
var foo = $('ul.load_details'); // or whatever
var duration = "slow"; // or whatever
if (foo.css('visibility') == 'visible') {
foo.css({ opacity: 1 }).animate({ opacity: 0 }, duration, function () {
foo.css({ visibility: "hidden" });
});
} else {
foo.css({ opacity: 0 }).animate({ opacity: 1 }, duration).css({ visibility: "visible" });
}
When the foo element is visible, then slowly change the opacity to zero (via animate) and then wait until that's done before setting foo's visibility to be hidden. Otherwise, if set to hidden during the animate process then the fading out effect will not happen since it's hidden immediately.
Alternatively, you can use the simpler, cleaner fadeTo():
var foo = $('ul.load_details'); // or whatever
var duration = "slow"; // or whatever
if (foo.css('visibility') == 'visible') {
foo.fadeTo(duration, 0, function () {
foo.css({ visibility: "hidden" });
});
} else {
foo.fadeTo(duration, 1).css({ visibility: "visible" });
}