We Keep Coding

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/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 ui show slide divs

I am attempting to have a link "onclick" js event that slides a specific div left. The following jsfiddle works if going from the first link through the third in that order. If going backwards, the div does not slide... I attempted re-zindexing so the div to slide is on top of the currently visible div, but that seems to not work.
http://jsfiddle.net/3qvro2pq/5/
function doShow(inDiv){
$(inDiv).zIndex(1);
$(inDiv).show({
effect:'slide',
direction:'right',
duration:1000,
complete:closeHidden
});
}
Please help.

You need to hide the other divs when the animation start, not when it is completet. Your code works, but the slide is not visible, because the active layer is on top until the animation finishes.
var curWindow;
function doShow(inDiv){
curWindow = inDiv;
$(inDiv).zIndex(1);
closeHidden();
$(inDiv).show({
effect:'slide',
direction:'right',
duration:1000
});
}
function closeHidden(){
$(".frameDiv").each(function(i){
if ("#" + this.id !== curWindow){
$("#" + this.id).hide();
$("#" + this.id).zIndex(99);
}
});
}
Here this works: http://jsfiddle.net/3qvro2pq/7/
EDIT: If you want to show the div until the animation is finished, set the zIndex before the animation starts and hide on complete.
EDIT2: This works.
var curWindow;
function doShow(inDiv){
curWindow = inDiv;
$('.frameDiv').zIndex(1);
$(inDiv).zIndex(10);
$(inDiv).show({
effect:'slide',
direction:'right',
duration:1000,
complete: closeHidden
});
}
function closeHidden(){
$(".frameDiv").each(function(i){
if ("#" + this.id !== curWindow){
$("#" + this.id).hide();
}
});
}
JSFiddle: http://jsfiddle.net/3qvro2pq/9/

Jquery previous .html() element still showing when new element clicked

I have to write code which finds all anchors and attaches a function that displays a popup of the elements text. My code is probably a mess, but I was able to get it working however the issue I have now is:
If I click link 1, then link 2, then click link 1 again, it displays link 2's text however if i click it again it displays the correct text.
I am not sure exactly how to rewrite or go about fixing this code to properly display the element which is clicked, text all the time.
here is a jsfiddle example: http://jsfiddle.net/2aLfL/1/
$(document).ready(function() {
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('a').click(function(){
if($(this).hasClass('selected')){
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
var elText = $(this).text();
$('#elPop').html("<p>" + "<br><br>" + "You just clicked: <br><b>" + elText + "</b><br><br><br>" + "Click anywhere to Close" + "</p>");
console.log(this);
$("#closeWin").click(function () {
$('.anchorpop').hide();
});
}
return false;
});
});
$(function close(){
$(document).click(function(){
$('.anchorpop').hide();
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
});

You're binding the following click handler
$("#closeWin").click(function () {
$('.anchorpop').hide();
});
inside <a> click handler so whenever a link is clicked, multiple handlers are being added.
You can avoid many unnecessary code using toggleClass() method.
You can also bind same event handlers to multiple elements by passing additional selectors.
after all your code boils down to
$(function () {
$('a').click(function () {
var htmlString = "<p>" + "<br><br>" + "You just clicked: <br><b>" + $(this).text() + "</b><br><br><br>" + "Click anywhere to Close" + "</p>"
$('.pop').html(htmlString).slideFadeToggle(function () {
$(this).toggleClass('selected');
});
return false;
});
$("#closeWin, .anchorpop").click(function () {
$('.anchorpop').hide();
});
});
and the custome slideFadeToggle function.
Updated Fiddle

Jquery toggle background color

I have a jquery function that when a li is clicked, the li expands. That part is working fine. Now, I want, when the li is clicked it toggles a background color. But it works, however when i have to click on the li item again to untoggle the background color. Can someone assist me in the right direction on how to achieve this.
$(function() {
$('.a').click(function() {
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide('fast');
$('.selected').css('background', 'yellow');
content.slideToggle('fast');
});
$("li").click(function() {
$(this).toggleClass("highlight");
});
});​

On every click set your <li>-s to default color and highlight the current:
$("li").click(function() {
$("li").removeClass("highlight");
$(this).addClass("highlight");
});
...
UPDATE
http://jsfiddle.net/NXVhE/4/
$(function() {
$('.a').click(function() {
$(this).removeClass("highlight");
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide();
content.toggle();
});
$("a").click(function () {
$("a").removeClass("highlight");
if ( $(".content").is(":visible") ) {
$(this).addClass("highlight");
}
});
});

Assuming the <li>s are all siblings, it would be slightly more efficient to do something like this, and would allow for more than one list on the same page to function independently of one another (again, assuming that is the desired functionality)
$('li').click(function() {
$('this').addClass('highlight').siblings().removeClass('highlight').
});