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

jquery/js - Using click function animate.css to animate and show another element

I'm refering animate.css from this site http://www.telegraphicsinc.com/2013/07/how-to-use-animate-css/
1- I have click function :
function animationClick(element, animation){
element = $(element);
element.click(
function() {
element.addClass('animated ' + animation);
//wait for animation to finish before removing classes
window.setTimeout( function(){
element.removeClass('animated ' + animation);
}, 2000);
});
}
2- I'm called the function here,but I want to change a bit,if i'm clicking the (#container) it will animate and show (.content) below:
$(document).ready(function(){
$('#container').each(function() {
animationClick(this, 'bounce'); // how I modified this line
$('.content').show(); // I want to show and animate bounce for (.content) not (#container)
});
});

I have solved my problem :)
$(function() {
$("#container").click(function() {
$(".content").show();
animate(".content p", 'animated bounceInDown');
return false;
});
});
function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}

jQuery fadeIn 'slow' immediately appearing

I'm trying to make it so that when you click a link, it removes a div (with some paragraphs and text) and inserts another div (with some paragraphs and some text). I'm using jQuery to fade those in and out. The fading out of the original div works when you click the link, and then I have a switch case to determine what gets faded in. However, the fadeIn, set to 'slow', appears to be occurring immediately.
Here's the relevant piece of code (the rest is just other cases):
$(document).ready(function() {
$('.nav-link').click(function() {
var linkClicked = $(this).attr("id");
$('.content').fadeOut('fast');
switch(linkClicked) {
case 'home':
console.log("linkClicked = "+linkClicked);
$('#home-content').fadeIn('slow', function() {
$(this).css("display", "inline");
$(this).css("opacity", 100);
});
break;
Edit:
So after changing fadeTo to fadeOut, and changing "slow" in the fadeOut to "fast", it worked well and transition the way I want. However, whenever I click "home" now it will move the div to a "block" position, (it spits it to the lower left corner) before shoving itself back into the right spot in the center of my container. It ONLY does this when I click home and no other of my sidenav links...which are all running the exact same code (home just is the first one in the switch case). Any ideas?

If you want the fadeIn to start after the fadeTo has completed, you'll want to use a callback function. Also, since you're fading to 0 opacity, just use fadeOut:
$(document).ready(function() {
$('.nav-link').click(function() {
var linkClicked = $(this).attr("id");
$('.content').fadeOut('slow', function() {
// this code will begin once fadeTo has finished
switch(linkClicked) {
case 'home':
console.log("linkClicked = "+linkClicked);
$('#home-content').fadeIn('slow', function() {
$(this).css("display", "inline");
$(this).css("opacity", 100);
});
break;
});
});

Without seeing your HTML, it's a little difficult to understand the exact outcome you're trying to achieve, but here is a JSfiddle with your code above.
http://jsfiddle.net/W9d6t/
$('.nav-link').click(function() {
var linkClicked = $(this).attr("id");
//$('.content').fadeTo('slow', 0);
switch(linkClicked) {
case 'home':
console.log("linkClicked = "+linkClicked);
$('#home-content').fadeIn('slow', function() {
$(this).css("display", "block");
alert('All done!');
});
}
});

From my understanding of what you are trying to do, I believe you simply need to do this:
$('#home-content').fadeIn('slow');
(the fadeIn function automatically sets the display property to inline/block)
Also, while your implementation correct, it's simpler to do:
$('.content').fadeOut('slow');
(simplified jsFiddle)

You just need to add a callback to fadeOut so that it executes after the animation is done:
$(document).ready(function() {
$('.nav-link').click(function() {
var linkClicked = $(this).attr("id");
$('.content').fadeOut('slow', function() {
switch(linkClicked) {
case 'home':
console.log("linkClicked = "+linkClicked);
$('#home-content').fadeIn('slow', function() {
$(this).css("display", "inline");
$(this).css("opacity", 100);
});
break;
});

Removing and Adding CSS Class with jQuery

I've an area which I'd like to add an CSS animation to when it's clicked, and then bring it back with another animation when it's loading.
I'm using Twitter's Bootstrap's tabs and turned on the "fade" transition between the tabs, but want to specifically animate something inside of those tabs while they're switching. I don't want to mess with the root J.S. code there so I'll just settle with a work around.
Heres my code:
$(".tabit").click(function (){
//Drop Center Icon on click
if ($('.centericon').hasClass('fadeInDown')) {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown").delay(100).queue(function(next){
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}
else{
$(".centericon").addClass("fadeOutDown").delay(100).queue(function(next){
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}
});
The .centericon class is repeated, so after 1 click, multiple instances will have the "fadeInDown" class. Works fine when I click one time, but if I click twice, then the .centericon only gets class .fadeOutDown.

$(".tabit").click(function (){
//Scroll to top when navigating through tabs
//Drop Center Icon on click
if ($('.centericon').hasClass('fadeInDown')) {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown");
$(".centericon").delay(100).queue(function() {
$(this).removeClass('fadeOutDown');
$(this).dequeue();
});
$(".centericon").delay(100).removeClass('fadeOutDown').addClass("fadeInDown");
}
else{
$(".centericon").addClass("fadeOutDown");
$(".centericon").delay(100).queue(function() {
$(this).removeClass('fadeOutDown').addClass("fadeInDown");
$(this).dequeue();
});
}
});

Change click to toggle
$(".tabit").toggle(function () {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown").delay(100).queue(function (next) {
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}, function () {
$(".centericon").addClass("fadeOutDown").delay(100).queue(function (next) {
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
});

jQuery toggle on dropdown

The problem:
In the example provided below, I have a sidenav with options, you click to reveal a toggled div. If you click the third item in the menu "Dolar", you will see you get a dropdown with three options appear below the link.
This is great, but I want the dropdown to close when I click on the other links. I'm not sure how to achieve this.
jsFiddle:
http://jsfiddle.net/visualdecree/4A23Z/39/
jQuery:
Note: I know it might be messy, I'm still learning this.
$('.sn a, .sn-alt a').on('click',function(){ // Sidenav panel script
var panID = $("#" + $(this).data('panel') );
$("div[id*='sn-pan-']")
.stop()
.hide({width:'toggle'},400);
$(panID)
.css({'left' : '139px','overflow':'visible'})
.stop()
.animate
({ width: "toggle", opacity: "toggle"
}, { duration: "slow" });
$(".control-view").hide(); // Fadein menu close button
$(".control-view").not(":visible").stop().delay(400).fadeTo("fast", 0.33);
});
$('.sn, .sn-drop').click(function(e) {
$('ul.sidenav li').not(this).removeClass('active'); // Active class removal / add
$(this).stop(true, true).toggleClass("active");
});
$('.sn-alt').click(function(e) {
$('ul.additional li').not(this).removeClass('active'); // Active class removal / add
$(this).stop(true, true).toggleClass("active");
});
$(".control-view").hover( // Hover effect for menu close button
function () {
$(".control-view").stop().hide().fadeTo("fast", 1); // Hover in
},
function () {
$(".control-view").fadeTo("normal",0.33); // Fade back to previous set opacity
});
$('.control-view').click(function(e) {
$("div[id*='sn-pan-']")
.stop(true,true)
.hide({width:'toggle'}, 100);
$('ul.sidenav li').not(this).removeClass('active');
$(".control-view").stop().fadeOut("fast");
});
$(".additional").hide(); // Controls for the 'design' dropdown
$(".sn-drop").click(function(){
$(".additional").slideToggle(300);
var scrt_var = Math.random();
return false; //Prevent the browser jump to the link anchor
});

Just add this JQuery, when you click on other link in your sidebar, it will close your .additional
$(".sn").click(function(){
$(".additional").slideUp(300);
var scrt_var = Math.random();
return false; //Prevent the browser jump to the link anchor
});
​

If it's just the links in the left that you want to be the trigger to close the dropdown then you can do it simply with this:
$('.sn').click(function(){
$('.additional').slideUp();
})