We Keep Coding

Make fade in-out effect runs infinite (pure JS, not jQuery)

I was searching a script to make a div to fade in and out, and found this question fade in and fade out in pure javascript without jquery
User bgoldst gave a nice solution that worked for me. But I would need the fade in-out to run in loop, not just once as stated by bgoldst's code. I'm totally new at JS and don't know how to get it to work, any suggestion?
EDIT: I have found a intermediate solution with Luke's suggestion and Kai's suggestions from Pure JavaScript fade in function
That is
<script type="text/javascript">
var div = document.getElementById("foo");
setInterval(function() {
div.style.transition="opacity 1.5s";
div.style.opacity=0;
}, 1500);
setInterval(function() {
div.style.transition="opacity 1.5s";
div.style.opacity=1;
}, 3005);
</script>
However, the fade in/out effect doesn't have a symmetric behaviour.

You can use CSS for that, no Javascript necessary. Just use the CSS animation property (set keyframes if you want, etc), and then set this property:
animation-iteration-count: infinite;
Based on your comment, here is a Pen I made that will do what you want - you'll just have to change the animation from changing background color to making it fade. I hope that helps:
http://codepen.io/lukeschunk/pen/pyPpQO

How Can I Animate Background Color Dynamically Added Element?

I am adding some elements with ajax. For this example, i am adding user comments. When user make new comment, his comment viewing first place and (this is question) I want to add new background animation first comment div. But i know we cant animate color with Jquery. I can use JqueryUI highlight effect. But i cant select new added element. Off course use here delegate() or on().. But my all try failed.
I need help.
Some Code Example;
$("#DoCommentBtn").click(function(){
var UserID = 1,
LookID = 2,
Comment = $("#CommentInput").val(),
CommentType = 0,
PostData = "USERID=" + UserID + "&LOOKID=" + LookID + "&Comment=" + encodeURI(Comment) + "&CommentType=" + CommentType;
$("#CmAnm").fadeIn();
$.ajax({
type:'POST',
url:'ajax.asp?cmd=docomment',
dataType:'html',
data:PostData,
success:function(cevap) {
$("#CmAnm").fadeOut();
$("#CommentsArea").load("ajax.asp?cmd=LoadComments&LOOKID=" + LookID + "&PART=0");
//Now all comments loaded Here I must animate background first div in #CommentsArea Animation Example: Background color blue to white..
}
});
});

But i know we cant animate color with Jquery
I'm not a jquery expert but i'm sure it is possible.
Is this what you're looking for?
$( "#CommentsArea div:first-child" ).animate({ backgroundColor: "#fff"}, 1000);
Should animate the background to white #FFF in 1 second (1000ms)
Docs: jQuery .animate() - jQuery UI .animate()
EDIT:
changed background to backgroundColor

Animation Properties and Values
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality
(For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used)
Docs : JQuery animate()
So what can i do right now ?
I am adding this library;
Jquery.Color
And now jsfiddle example working.
Example Code :
$(".justDiv").animate({ backgroundColor: "#ffffff",width:105 }, 1000);

jQuery hover scale from bottom

This is certainly going to be an easy one but I can't get my head around what I am doing wrong...
I am trying to do a hover effect on a UL that affects a link within one of the UL LI's.
My current code looks like this:
$("ul.punchlines").hover(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '60%','top':'-65px'});
});
$("ul.punchlines").mouseleave(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '30%','top':'0px'});
});
This technically works as it gives the effect that the base of the element to be scaled remains in place and scales up from the bottom however it does it in two stages, I am trying to get this effect to happen all in one motion so it is a seamless scale and move.
I can do this easily with basic CSS3 transitions but as it is not supported in IE9 I am trying to use jQuery to allow for maximum browser support.
Can anyone offer a little support firstly about how I get the animation to happen in one motion (not staggered) and secondly if this is the right approach? I am new to jquery and only just getting my hands dirty with it :-)

Please see JQuery hover api:
http://api.jquery.com/hover/
also make sure that your "li" have absolute position.
$("ul.punchlines").hover(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '60%','top':'-65px'});
}, function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '30%','top':'0px'});
});

Timed transition between image swaps with JQuery?

I have this code:
$('.pic_windows img').mouseenter(function () {
$(this).effect('shake', {
times : 4,
distance : 5
}, 15).attr('src', $(this).attr('src').replace(/.jpg/, '-1.jpg'))
});
$('.pic_windows img').mouseleave(function () {
$(this).attr('src', $(this).attr('src').replace(/-1.jpg/, '.jpg'))
});
where I'm using JQuery's .attr to swap the images, but I'd like the swapping to occur over the course of around 1 second. I've googled this and get all these complicated "CSS3 transitions with JQuery fallback" tutorials. Is there a way to 'animate' an .attr change?
I think I should do a fadeOut while the other fadeIn but I don't know how to write it, as I'm almost a complete JQuery newbie. I have a number of these transitions to do over the course of several pages. It'd be a cinch if I needed to write this for just one instance.
UPDATE On mouseenter, the image shakes and then should during this shake, fade from one picture to its swapped picture. On mouseleave, the image should just fade back to the original picture. Unfortunately I have also found that the shake effect is breaking on IE, all versions, as well as the image swap (it doesn't see image 2 at all)

No, you cannot animate an attribute change. What you can do is clone an element, change an attribute and transition between them.
var target = $(this).fadeOut();
var src = target.attr('src').replace(/-1.jpg/, '.jpg');
var copy = target.clone()
.attr('src', src)
.hide()
.insertAfter(target)
.fadeIn();
EDIT: Thank you for clarifying your intentions, I would advise not playing with the 'src', which will essentially require building a small stateful plugin. Instead, stick with the desired effect here, reveal an image on hover. jsFiddle
HTML
<div class="shaker">
<img src="http://lorempixel.com/output/nature-q-c-360-240-3.jpg" />
<img class="hover" src="http://lorempixel.com/output/technics-q-c-360-240-9.jpg" />
</div>​
CSS
.shaker {
position: relative;
}
.shaker img {
position: absolute;
}
.hover {
display: none;
}
JS
$('.shaker').hover(function () {
$(this).effect('shake', {
times: 4,
distance: 5
}, 15);
$(this).find('.hover').fadeIn();
}, function () {
$(this).find('.hover').stop().fadeOut();
});​
http://jsfiddle.net/eHQ3t/13/

Fade color answer trick

For example when I copy the link from an answer and access it, a nice block of color appears to highlight the answer and then is fading out. How this is done?

It looks at the hash, selects that answer, and then animates the background color. Either use jQuery UI or add the Colors plugin to be able to animate colors.
This is what the code may look like...
var hash = window.location.hash;
if (hash) {
var answer = $('#answer-' + hash.substr(1)),
originalBackgroundColor = answer.css('backgroundColor');
// This class changes the background colur.
// Best to keep style stuff in the CSS layer.
answer
.addClass('linked')
.animate({
backgroundColor: originalBackgroundColor
}, 1000);
// You may optionally remove the added class
// in the callback of the above animation.
}