We Keep Coding

jQuery switvching DIVS with fade effect

I have a very simple script to switch out divs. I would like to add in a fading transition to the script so that it is a bit smoother. However I cannot see what I am doing wrong (totally JS incompetent)
Thanks for any advice.
jQuery(document).ready(function( $ ) {
$('#div2, #div3').hide();
$('.show').click(function () {
$('.targetDiv').hide().fadeOut(1000);
$('#div' + $(this).attr('target')).show();
});
});

Your problem lies in this line: $('.targetDiv').hide().fadeOut(1000);
What is does - it sets style display: none; to all your elements you plan to cross-fade.
Also use the right attributes: data-target="#div1" instead of target="#div1" (which is not used for that purpose)
Instead:
jQuery(function($) { // DOM ready
// get all your targetDiv elements
var $fadeDivs = $(".targetDiv");
// Hide all but this one
$fadeDivs.not("#div1").hide();
$('.show').click(function(evt) {
// prevent the browser doing default stuff
evt.preventDefault();
// get the target element - using data-target attribute!
var selector = $(this).data('target');
var $target = $( selector );
// crossfade (don't forget to use .stop())
$fadeDivs.not($target).stop().fadeOut(1000);
$target.stop().fadeIn(1000);
});
});
.targets{ position:relative; height:100px; }
.targetDiv { position:absolute; height:100px; top:0; left:0;}
<div class="targets">
<div id="div1" class="targetDiv"><img src="//placehold.it/100x100/0bf"></div>
<div id="div2" class="targetDiv"><img src="//placehold.it/100x100/f0b"></div>
<div id="div3" class="targetDiv"><img src="//placehold.it/100x100/bf0"></div>
</div>
<a data-target="#div1" class="show">SHOW1</a>
<a data-target="#div2" class="show">SHOW2</a>
<a data-target="#div3" class="show">SHOW3</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JQuery - fade in (animate) img with replace and attr change

HTML:
<td>
<div class="content" style=""><img src="FoodBlockPic.png" style="max-width: 100%;"></div>
</td>
<td>
<div class="content" style=""><img src="DeliveryBlockPic2.png" style="max-width: 100%;" id="deliveryPIC"></div>
</td>
<td>
<div class="content" style=""><img src="PickupBlockPic2.png" style="max-width: 100%;"></div>
</td>
</tr>
JQuery:
<script>
$(document).ready(function(){
$('#deliveryPIC').hover(function() {
var src = $(this).attr("src").replace("DeliveryBlockPic2.png", "DeliveryBlockPicAlt.png");
$(this).attr("src", src);
// $('#deliveryPIC').fadeIn("slow");
// $('#deliveryPIC').hide();
$('#deliveryPIC').fadeIn();
}, function() {
var src = $(this).attr("src").replace( "DeliveryBlockPicAlt.png", "DeliveryBlockPic2.png");
$(this).attr("src", src).stop();
// $('#deliveryPIC').fadeIn("slow");
// $('#deliveryPIC').hide();
$('#deliveryPIC').fadeIn();
});
});
</script>
I would simply like to animate the transition between the original picture and it's replaced src picture on hover and animate again when off hover. I am having trouble figuring out how to do this b/c just fade in does not work, fade in with hide makes the transition kind of glitchy, and the top fade in statement also does nothing by itself... Would mouseon, mouseoff be best here, and if so, how would I animate that transition? With my current code, the image swap works properly, but I can't seem to figure out the animation/fade-in/fade-out. Thanks for the help!!! :D

If you want to replace the src attribute you need to know that you have to wait until the image will finish the fadeOut animation before you can replace the src ,otherwise, the image just disappear but not with animation.
$('img').hover(function(){
var img = $(this);
img.fadeOut(function(){
img.attr('src', img.attr('data-src2')).fadeIn();
});
}, function(){
var img = $(this);
img.fadeOut(function(){
img.attr('src', img.attr('data-src1')).fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://i.stack.imgur.com/1JQvA.png" data-src1="http://i.stack.imgur.com/1JQvA.png" data-src2="http://i.stack.imgur.com/Y4qVb.png" />
If you want that the fadeIn and the fadeOut will occurred simultaneously, you have to put the both of the images and hide the second. When mouse over you can animate them both simultaneously. Something like this:
$('.wrapper').hover(function(){
$('img').fadeToggle('slow');
}, function(){
$('img').fadeToggle('slow');
});
.wrapper {
position:relative;
width:69px;
height:68px;
}
.wrapper img {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.wrapper img:last-child {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<img src="http://i.stack.imgur.com/1JQvA.png" />
<img src="http://i.stack.imgur.com/Y4qVb.png" />
</div>

Removing a CSS onClick

I'm trying to make my link toggle from left to right. I'm using the code below;
HTML:
$forum_threads = '
<div id="latest_threads_link">
<img src="images/kalachi/latest_threads.png" alt="Latest Threads" title="Click Here to see latest threads of this section.">
<table border="0" cellspacing="'.$theme['borderwidth'].'" cellpadding="'.$theme['tablespace'].'" class="tborder" style="display: none;" id="latest_threads_show">
'.$forum_threads_bit.'
</table>
</div>
';
jQuery:
jQuery(document).ready(function($){
$('a[id^="latest_threads_click"]').on('click', function (e){
e.preventDefault();
$('#latest_threads_show').slideToggle();
$('#latest_threads_click').addClass('latest_threads_link_active');
});
});
CSS:
#latest_threads_link{
left:0;
position:fixed;
bottom:150px;
}
.latest_threads_link_active{
left:200px;
position:fixed;
bottom:150px;
}
I want to make it so when #latest_threads_link is clicked then #latest_threads_show toggleout from left to right and on second click on #latest_threads_link then the table #latest_threads_show hides.
It actually does with my code but the issue is the #latest_threads_link remains on 200px away from left even on second click. I want #latest_threads_link to go left: 0 on second click.
Please help!!

Your problem is that you're adding the class on each click. Instead, change this line:
$('#latest_threads_click').addClass('latest_threads_link_active');
to this:
$('#latest_threads_click').toggleClass('latest_threads_link_active');

use toggleClass :
Demo : http://jsfiddle.net/5Y9mG/6/
jQuery(document).ready(function($){
$('a[id^="latest_threads_click"]').on('click', function (e){
e.preventDefault();
$('#latest_threads_show').slideToggle();
$('#latest_threads_click').toggleClass('latest_threads_link_active');
});
});

Replace
$('#latest_threads_show').slideToggle();
with
$('#latest_threads_show').slideToggle(400, function()
{
if($(this).is(":hidden"))
{
$(this).css({'left':'0px;'});
}else
{
$(this).css({'left':'200px;'});
}
});
It changes the left from 0px to 200px and repeat, etc (toggling).

Background Image Rotator with jQuery?

I am working on a website that the background image will fade from one to another, I have it setup and working about 98%. There is just one little problem. When it first loads and does it's first fade it fades to white and then to the image, instead of fading straight into the next image. After that it work beautifully. This is using jQuery 1.9 and I have jQuery noConflict on since the previous developer coded the sites menu using MooTools.
<html>
<head>
<script src="js/jquery.js">
</script>
<script>
var $s = jQuery.noConflict();
function swapImages(){
var $sactive = $s('#myGallery .active');
var $snext = ($s('#myGallery .active').next().length > 0) ? $s('#myGallery .active').next() : $s('#myGallery img:first');
$snext.fadeIn(1500).addClass('active');
$sactive.fadeOut(2000, function(){
});
$sactive.removeClass('active');
};
$s(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);
});
</script>
</head>
<style>
#myGallery{
position:relative;
width:100%; /* Set your image width */
height:auto; /* Set your image height */
}
#myGallery img{
display:none;
position:absolute;
top:0;
width: 100%;
left:0;
}
#myGallery img.active{
display:block;
}
.home-page-rotator{
position:absolute;
width:100%;
z-index:-10;
}
</style>
<body>
<div class="home-page-rotator" id="myGallery">
<img src="images/1.jpg" class="active" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
</div>
</body>
</html>
I took out all the content so you can test if you wanted but the is everything that runs the background rotation and fade. Also I have the CSS in a seperate file but for posting to here I just put it inline so you can see the CSS behind the code. Let me know what I should do to fix this?

Moving the remove class method to the function call of the fadeout seems to work better for me (at least in Chrome):
<script>
var $s = jQuery.noConflict();
function swapImages(){
var $sactive = $s('#myGallery .active');
var $snext = ($s('#myGallery .active').next().length > 0) ? $s('#myGallery .active').next() : $s('#myGallery img:first');
$sactive.fadeOut(2000, function(){
$sactive.removeClass('active');
});
$snext.fadeIn(1500).addClass('active');
};
$s(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);
});
</script>

I ran into this problem a while back and I found the easiest solution was to switch from img elements to using two divs and the background-image css url to display your images. I made a simple slider for that a while back. You're welcome to copy whatever you need from it.
Background slider source
In essence, if you have two divs that are absolutely positioned as the background elements, you can cycle their z-indexes and fade them in and out. Furthermore, you can load the next image in a constructed img element and once it has loaded, change the background-image of the hidden div and fade to it. This means that there is no loading shown and you can fade directly into the slideshow.
Here's some pseudo code below, but it would probably be easier to just look at the real functions in the source.
base.next_slide = function () {
"current slide" = "next slide";
base.containers[the_shown_container].fadeOut(duration,function () {
$(this).css({'background-image':'url("' + "Next image url" + '")',
"z-index":"-2"});
base.containers[the_next_container].css("z-index","-1");
$(this).show();
the_shown_container = the_next_container;
});
};
Plugin.prototype.init = function (base) {
$('<img/>').attr('src', "Next image url").load(function() {
base.containers[the_next_container].css('background-image', 'url(' + "Next image url" + ')');
if ("there's only one image in the slider"){
base.containers[the_shown_container].fadeOut(duration,function () {
$(this).css("z-index","-2");
base.containers[the_next_container].css("z-index","-1");
});
return;
}
base.next_slide();
setInterval(base.next_slide ,base.o.interval);
});
};

jQuery simple slideshow creates long pauses

Here is this simple slideshow I'm using:
function slideShow(){
var current = $('#animation .show');
var next = current.next().length ? current.next() : current.parent().children(':first');
current.removeClass('show');
next.addClass('show');
setTimeout(slideShow, 500);
}
$(document).ready(function() {
slideShow();
});
It works but it creates long pauses between images...Is there a way to fix this?
Thanks in advance!
EDIT
this is the HTML code,I guess pauses was the wrong word, what I want to achieve is every image is displayed immediately after the other, right now I have a small gap that nothing is displayed.
<div id="animation">
<img alt="graphic" class="show" src="files/animation_img/GRAPHIC.jpg" />
<img alt="design" src="files/animation_img/DESIGN.jpg" />
<img alt="etc" src="files/animation_img/ETC.jpg" />
</div>
and the CSS:
#animation img
{
position:fixed;
top:400px;
left:700px;
display:none;
visibility:hidden;
width:200px;
height:100px;
}

Try this
function slideShow(){
var current = $('#animation .show');
var next = current.next().length ? current.next() : current.parent().children(':first');
current.removeClass('show');
next.addClass('show');
}
$(document).ready(function() {
setInterval(slideShow, 500)
});