We Keep Coding

How can i put a fadein effect in my jquery code

I want to know how can i put the fadeIn code here? i have a gridview inside a gridview and i want to put a effect in it when the user clicks the "plus/minus" picture, as of now my effect is just a simple popup through the gridview, how can i put the fadeIn or slideDown effect into my code?
below is my code
$("[src*=plus]").live("click", function() {
$(this).closest("tr").after("<tr><td></td><td colspan ='100%'>" + $(this).next().html() + "</td></tr>");
$(this).attr("src", "../Images/Icons/minus2.png");
});
$("[src*=minus]").live("click", function() {
$(this).attr("src", "../Images/Icons/plus2.png");
$(this).closest("tr").next().remove();
});

If you immediately add display:none to the element you spawn you should be able to fade it in. To fade out, you'll need to use a callback in the fadeOut function for removing the element, that way there's time for it to transition before you drop it. *Revised so the row fades and not the image, based on what you needed
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr style='display:none;'><td></td><td colspan ='100%'>" + $(this).next().html() + "</td></tr>");
$("tr[style*='display:none']").fadeIn(500);
$(this).attr("src", "../Images/Icons/minus2.png");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "../Images/Icons/plus2.png");
var removedTr = $(this).closest("tr").next();
removedTr.fadeOut(500, function(){
removedTr.remove();
});
});

This will hide the content initially, allowing you to use fadeIn()
$("[src*=plus]").live("click", function () {
var container = $(this).closest("tr"),
newContent = $("<tr><td></td><td colspan ='100%'>" + $(this).next().html() + "</td></tr>").hide();
container.after(newContent);
newContent.fadeIn();
$(this).attr("src", "../Images/Icons/minus2.png");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "../Images/Icons/plus2.png");
$(this).closest("tr").next().fadeOut(function() {
$(this).remove();
});
});

Unable to get an element animation to wait for another in jquery

If you go to an album (eg. Nature because still working on the others) and click one of the images they all fade out and then the one you clicked appears to just show up on the screen. What is happening is that it is still fading in as the thumbnails are fading out. I tried adding the rest of the code inside a .complete(), but that seems to break it.
$(document).ready(function(){
$('.photos').on('click', function() {
var src = $(this).attr('src').replace('thumb-','');
$('.photos').stop().fadeOut(500);
$('.enlarged').remove();
$('#album').append('<img class="enlarged" src="' + src + '">');
$('.enlarged').hide();
$('.enlarged').stop().fadeIn(500).done(
$('.enlarged').on('click', function () {
$(this).stop().fadeOut({
duration: 500,
done: this.remove()
});
$('.photos').stop().fadeIn(500);
})
);
});
});

You can use promise to catch complete all fade out animation:
$(document).ready(function(){
$('.photos').on('click', function() {
var src = $(this).attr('src').replace('thumb-','');
var photos = $('.photos');
photos.stop().fadeOut(500);
photos.promise().done( function() {
$('.enlarged').remove();
$('#album').append('<img class="enlarged" src="' + src + '">');
$('.enlarged').hide();
$('.enlarged').stop().fadeIn(500).done(
$('.enlarged').on('click', function () {
$(this).stop().fadeOut({
duration: 500,
done: this.remove()
});
$('.photos').stop().fadeIn(500);
})
);
});
});
});

Jquery Animate height toggle

I am using JQuery for making a widget effect i.e. minimizing and maximizing a widget..
But the problem is that when i click on the minimize button speedily the widget crashes..
I think that the problem is that it takes mid animation height as its new height at the time of toggle...
Please help...
$(document).ready(function () {
$('.widget-minimize').click(function () {
toggleMinimize($(this).parents('.widget').attr('id'));
});
$('.widget-close').click(function () {
closeWidget($(this).parents('.widget').attr('id'));
});
});
function toggleMinimize(widgetId) {
var $content = $('#' + widgetId + ' .widget-content');
if ($content.height()) {
$content.data('oldheight', $content.height());
$content.animate({height: 0});
$('#' + widgetId).find('.widget-minimize').attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-maximize.png').attr('alt', 'maximize');
}
else {
$content.animate({height: $content.data('oldheight')});
$('#' + widgetId).find('.widget-minimize').attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-minimize.png').attr('alt', 'minimize');
}
}
function closeWidget(widgetId) {
$('#' + widgetId).animate({ "opacity": 0, "height": 0 }, 200, "swing");
}
Click here to see jsFiddle

Just return from your toggleMinimize function if your content is currently being animated, like this:
function toggleMinimize(widgetId) {
var $content = $('#' + widgetId + ' .widget-content');
if ($content.is(':animated')) {
return;
}
See working fiddle

In my case, the fiddle is working correctly, but I would recommend you to use max-height in case of height, so use max-height: 0 and max-height: 80 (assuming 80 is a bit more of the max height). Also you can pass the element and not just the ID.
$(document).ready(function () {
$('.widget-minimize').click(function () {
toggleMinimize($(this).parents('.widget'));
});
$('.widget-close').click(function () {
closeWidget($(this).parents('.widget'));
});
});
function toggleMinimize(selector) {
var $content = $('.widget-content', selector);
if ($content.height()) {
$content.data('oldheight', $content.height());
$content.animate({maxHeight: 0});
$('.widget-minimize', selector).attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-maximize.png').attr('alt', 'maximize');
}
else {
$content.animate({maxHeight: $content.data('oldheight')});
$('.widget-minimize', selector).attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-minimize.png').attr('alt', 'minimize');
}
}
function closeWidget(widgetId) {
$('#' + widgetId).animate({ "opacity": 0, "max-height": 0 }, 200, "swing");
}

Take a look at jQuery's .stop() method and its :animated selector. I often use them in situations like this to help me handle animations that are already running.
For example:
$("#element").on("click", function() {
if ($(this).not(":animated")) {
...animation code...
}
});
and
$("#element").on("click", function() {
$(this).stop();
...animation code...
});

Order jQuery functions, only run when last is completed

Im trying to control the order of my functions in jquery, on click id like an image to fade out, the source of the image to be swapped, and then the new image fade in.
I have the following that sort of works, only it does them all at once, is their a way to prevent this?
// Animate height of div containing information
$(this).animate({
'height' : '600px'
},500, function(){
$('html, body').animate({ scrollTop: $(this).offset().top });
// Fade initial image out
img.fadeOut();
// Switch to hi-red image
img.attr('src', function(i, value) {
return '_includes/images/work/hires/' + value;
});
//Fade Hi res image in
img.fadeIn();
});

fadeOut can take a complete attribute : http://api.jquery.com/fadeOut/
// Animate height of div containing information
$(this).animate({
'height' : '600px'
},500, function(){
$('html, body').animate({ scrollTop: $(this).offset().top });
// Fade initial image out
img.fadeOut(400, function() {
// Switch to hi-red image
img.attr('src', function(i, value) {
return '_includes/images/work/hires/' + value;
});
//Fade Hi res image in
img.fadeIn();
});
});

You should be able to do this with promise()
// Fade initial image out
img.fadeOut();
// Switch to hi-red image
img.promise().done(function() {
$(this).attr('src', function(i, value) { return '_includes/images/work/hires/' + value; });
});
//Fade Hi res image in
img.fadeIn();
Docs: http://api.jquery.com/promise/

You can use the 'queue' functionality of jQuery to queue up function calls.
http://api.jquery.com/queue/

You should use a callback function.
// Fade initial image out
img.fadeOut(duration, function () {
// Switch to hi-red image
img.attr('src', function(i, value) {
return '_includes/images/work/hires/' + value;
});
//Fade Hi res image in
img.fadeIn();
})
This way, once the first image had faded out, jQuery will call the anonymous function you passed as an argument.
Source: http://api.jquery.com/fadeOut/

Combining jQuery/JavaScript functions

Is there any way to combine all of this to reduce the amount of javascript?
$(document).ready(function() {
$(".individualImagebox img").bind("click", function()
{
var src = $(this).attr("src");
if (src.search(/Red\.jpg$/) >= 0) return;
// Removes the red overlay from the images folder
$('.individualImagebox img').attr( "src", function () {
var thisSRC = $(this).attr( "src");
return thisSRC.replace(/Red\.jpg$/, ".jpg");
});
// Adds the red overlay from the images folder
$(this).attr( "src", src.replace(/\.jpg$/, "Red.jpg") );
});
});
function ShowHide(index) {
var itemSelector = ".name:eq(" + index + ")";
$(".name .bio").fadeOut();
$(".name").not(itemSelector).fadeOut();
$(itemSelector).animate({"height": "show"}, { duration: 500 });
$(itemSelector + " .bio").animate({"height": "show"}, { duration: 500 });
}

$(function() { // $(function(){}) is a shortcut of $(document).ready(function(){})
var $activeImg; // Maintain a reference to the last activated img
$(".individualImagebox img").click(function(){
if (!!$activeImg) {
$activeImg.attr("src", function(i, src){
return src.replace(/(.+)Red\.jpg$/, "$1.jpg");
});
}
$activeImg = $(this).attr("src", function(i, src){ // replace attribute and updates active img reference
return src.replace(/(.+)\.jpg$/, "$1Red.jpg");
});
});
});
I don’t know exactly what you are trying to do but if possible, you should toggling a class instead of modifying the src attribute.

Combining methods won't save you space. Take a look at
http://developer.yahoo.com/yui/compressor/