We Keep Coding

Can you target an element by its dynamically changing opacity?

Through the use of a function in jQuery, along with my HTML & CSS, I have a series of different colored divs that change their opacity to appear as though the opaque div moves from left to right. I want the user to be able to click a red button to stop the animation on a square of his/her choosing. Right now I can get the animation to stop (albeit after it finishes its queued animations), but I am having trouble getting the square that has its opacity at 1 (at the time of the button click) stay at opacity 1. Any help would be greatly appreciated.
Here is a jsfiddle http://jsfiddle.net/seifs4/krm6uenj/
$(document).ready(function () {
$.fn.extend({
brighten: function(){
$(this).fadeTo(150, 1);
}
});
$.fn.extend({
fade: function(){
$(this).fadeTo(150, 0.2);
}
});
function animateSequence() {
$('.game-square').each(function (i) {
$(this).delay((i++) * 145).brighten();
$(this).delay((i++) * 5).fade();
});
}
animateSequence()
var interval=setInterval(animateSequence, 1700);
$('#red-button').click(function(){
$('.game-square').each(function(){
if ($('.game-square', this).not().css('opacity') == 0.2){
$(this).css('opacity', '1');
}
});
clearInterval(interval);
});
});

You maybe need something like this:
function animateSequence(){
this.current = 0;
this.squares = $(".game-square");
this.animate = function(){
this.squares.eq(this.current).fadeTo(150, 1, function(){
$(this).fadeTo(150, 0.2)
});
this.current = this.current >= this.squares.length - 1 ? 0 : this.current + 1;
};
this.start = function(){
this.running = setInterval(this.animate.bind(this), 150)
};
this.stop = function(){
this.running = clearInterval(this.running);
this.squares.eq(this.current).stop().css("opacity",1);
alert("Current color: " + this.squares.eq(this.current).attr("class"))
}
}
Demo
This is the advantage of working with objects, a way very readable, simple and orderly.

I will take a different and less complex approach. Perhaps it has even better performance.
Demo http://jsfiddle.net/LkatLkz2/8/
This is the whole code. I use css for animation effect, and class changing opacity.
var sqrs = $('.game-square'),
len = sqrs.length,
i=0,
looping = true;
setInterval(function(){
if (!looping) return;
sqrs.removeClass('full').eq(i).addClass('full');
i = ++i % len;
},400);
$("#red-button").click(function () {
looping = !looping;
});

The JQuery .stop() function help you to stop the animation. I know this is not the best solution for your problem because your opacity stay "1" only a short time.
$('#red-button').click(function(){
clearInterval(interval);
$('.game-square').stop();//this stop the animation
$('.game-square').each(function(){
if ($(this).not().css('opacity') > '0.2'){// I changed this logic
$(this).css('opacity', '1');
}
});
});

Animate an element in real time

I need to know the position of an img in real time in order to change its position while is going up or down. The target is animate it to the bottom 40px at the beginning and animate it to the top later.
My code up to now is the following:
var pos = $('header img').offset().top;
if( pos == 0) {
$('header img').animate({"top": "+=40px"}, 6000);
}else{
$('header img').animate({"top": "-=40px"}, 6000);
}
Any idea?

You can use progress option to detect the position live. I also made some changes so you don't have to use so much duplicated code:
$('#startAnimation').on('click', function () {
var pos = $('header #img').offset().top;
if (pos == 0) {
doAnimate("+=40px");
} else {
doAnimate("-=40px");
}
});
function doAnimate(to) {
$('header #img').animate({
top: to
}, {
duration: 6000,
progress: function (promise) {
console.log('offset top: ' + $('header #img').offset().top);
}
});
}
Fiddle: http://jsfiddle.net/z3jk1g0z/
You could also change it to use start and complete options in animate. More information: http://api.jquery.com/animate/
EDIT: wrong Fiddle

Slow/unresponsive animation with jQuery animation

I am writing a small jQuery function and I seem to be having trouble.
What I am trying to do here is when the user scrolls down the page by 90px, a div tag should animate down (from top:-50px to top:0), and vice-versa when they scroll back to the top of the page.
The problem I am having is that the animation seems to be very slow and unresponsive at times. I test in 3 different browsers and different computers but I am having no joy.
Here is my code:
// Show div
var scrollValue = "90";
// Animate functions
var showHead = function (){
$(".element").animate({top: "0"}, 250);
}
var hideHead = function (){
$(".element").animate({top: "-50px"}, 250);
}
$(window).scroll(function() {
if ($(this).scrollTop() > scrollValue) {
showHead();
} else {
hideHead();
}
});
The .element properties:
.element { positoin:fixed; top:-50px; }
Could anyone figure out why my code the hide/showHead functions are so sloppy?
Thanks,
Peter

The scroll event is triggered several times and even though it is rate-limited it keeps being a rather intensive operation. Actually, you may be queuing several animations and the fx stack may be growing very quickly.
One possibility you can try is stopping all previous animations before triggering a new one. You can do this by using .stop().
$(".element").stop().animate({top: "0"}, 250);
The .stop() function also provides some other options which you can use to tweak it even more.

Try this one :
$(window).scroll(function() {
if (window.scrollY > scrollValue) {
showHead();
} else {
hideHead();
}
});

scroll events occurred many time durring user scrolling.
You need to check if your animation is in progress before starting the animation again.
Try this :
// Show div
var scrollValue = "90";
var inProgress = false;
// Animate functions
var showHead = function () {
if(inProgress)
return false;
//Animate only if the animation is not in progress
inProgress = true;
$(".element").animate({
top: "0"
},250,function(){
inProgress = false; //Reset when animation is done
});
}
var hideHead = function () {
if(inProgress)
return false;
//Animate only if the animation is not in progress
inProgress = true;
$(".element").animate({
top: "-50px"
}, 250,function(){
inProgress = false; //Reset when animation is done
});
}
$(window).scroll(function () {
if ($(this).scrollTop() > scrollValue) {
showHead();
} else {
hideHead();
}
});

Assuming you have position:fixed (or some other sort of styling making the bar visible when necessary):
var scrollheight = 90;
var $el = $('.element');
function showHead(){
$el.stop().animate({
top: '0px'
}, 250);
}
function hideHead(){
$el.stop().animate({
top: '-50px'
}, 250);
}
$(window).scroll(function(){
if ($(window).scrollTop() > scrollheight){
showHead();
}else{
hideHead();
}
});
example: http://jsfiddle.net/L4LfL/

try using queue: false and as Alexander said use .stop()
here jsfiddle
http://jsfiddle.net/hwbPz/

jQuery Tools Tabs Custom Animation

I''m using this library in my project : jQuery Tools Tabs, and from what I've read I can make my custom effect instead of having the default one.
I decided to have an effect like this one : Demo . And I found something that could be similar, but I'm having trouble implementing it.
$.tools.tabs.addEffect("subFade", function(tabIndex, done) {
var conf = this.getConf(),
speed = conf.fadeOutSpeed,
panes = this.getPanes();
var $tab = this.getCurrentTab();
if($tab.hasClass("current")){//Going AWAY from the tab, do hide animation (before the tab is hidden)
$(".tabs-tab").animate({"left" : "0px"}, 300, function(){//I was sliding it behind the tabs when not in use, replace with your own animation
panes.hide();
panes.eq(tabIndex).fadeIn(200, done);
console.log("Done done");
//This is then end of the chain - my animation, hide all then fade in new tab.
});
} else {//going away from any other tab
panes.hide();
panes.eq(tabIndex).fadeIn(200, done);
}
$tab = this.getTabs().eq(tabIndex);
if($tab.hasClass("current")){//Going to my special tab.
$(".tabs-tab").animate({"left" : "-160px"}, 300);//Sliding it out
}
// the supplied callback must be called after the effect has finished its job
done.call();
});
The above is what I have been trying but without success. So I was wondering if someone knows what I'm doing wrong and how can I make that custom effect behave like the demo ?

I have made a content slider similar to your example (however it does Not have FadeIn/Out functionality), but maybe with some modification of my code you can make that effect.Fiddle here
My full code:
$(document).ready(function() {
$('.slides div:not(:first)').hide();
$('.slides div:first').addClass('active');
//Put .active width in var
var activeWidth = $(".active").outerWidth();
$('.control p:first').addClass('current');
$('.control p').click(function() {
/*store P index inside var*/
var Pindex = $(this).index();
/* Store the slides in var*/
var slidePosition=$('.wrapper .slides div');
/* check if ACTIVE slide has GREATER index than clicked P TAG (CONTROLS)*/
if($(".wrapper .slides div.active").index() > $('.wrapper .slides div').eq(Pindex).index()) {
/*Show the slide equal to clicked P-TAG(CONTROLS)*/
slidePosition.eq(Pindex).show();
/*Add class "current" to the clicked control*/
$(this).addClass('current').prevAll('.current').removeClass('current');
$(this).nextAll('.current').removeClass('current');
$(".active").removeClass("active");
$(".slides").css({"margin-left":-activeWidth});
/*Start animation...*/
$(".slides").animate({marginLeft:activeWidth-activeWidth},1000,function() {
slidePosition.eq(Pindex).addClass("active");
$(".slides").css({"margin-left":"0px"});
$(".active").prevAll().hide();
$(".active").nextAll().hide();
});
}
if($('.slides').is(':animated')) {
return false;
}
if($(this).is($(".current"))) {
return false;
}
if($(".wrapper .slides div.active").index() < $('.wrapper .slides div').eq(Pindex).index()) {
slidePosition.eq(Pindex).show();
$(this).addClass('current').prevAll('.current').removeClass('current');
$(this).nextAll('.current').removeClass('current');
$(".active").removeClass("active");
$(".slides").animate({marginLeft:-activeWidth},1000,function() {
slidePosition.eq(Pindex).addClass("active");
$(".slides").css({"margin-left":"0px"});
$(".active").prevAll().hide();
$(".active").nextAll().hide();
});
}
});
$(".left").click(function() {
if($('.slides').is(':animated')) {
return false;
}
if($(".active").prev().length===0) {
//alert("no prev");
$(".active").nextAll().clone().insertBefore(".active");
$(".active").removeClass("active").prev().addClass("active");
$(".active").show();
$(".slides").css({"margin-left":-activeWidth});
$(".slides").animate({marginLeft:activeWidth-activeWidth},1000,function() {
$(".active").next().insertBefore($(".slides div:first")).hide();
var activeIndex = $(".active").index();
$(".active").nextAll().remove();
$(".current").removeClass("current");
//alert(activeIndex)
$(".control p").eq(activeIndex).addClass("current");
});
}
else{
$(".active").removeClass("active").prev().addClass("active");
$(".active").show();
$(".slides").css({"margin-left":-activeWidth});
$(".slides").animate({marginLeft:activeWidth-activeWidth},1000,function() {
var activeIndex = $(".active").index();
$(".active").prevAll().hide();
$(".active").nextAll().hide();
$(".current").removeClass("current");
$(".control p").eq(activeIndex).addClass("current");
});
}
});
$(".right").click(function() {
if($('.slides').is(':animated')) {
return false;
}
if($(".active").next().length===0) {
//alert("no next")
$(".slides div:first").nextAll(':not(.active)').clone().insertAfter(".active");
$(".slides div:first").insertAfter(".active");
$(".active").removeClass("active").next().addClass("active");
$(".active").show();
$(".slides").animate({marginLeft:-activeWidth},1000,function() {
$(".active").prev().hide().insertAfter(".slides div:last");
$(".slides").css({"margin-left":"0px"});
$(".active").prevAll().remove();
$(".current").removeClass("current");
var activeIndex = $(".active").index();
$(".control p").eq(activeIndex).addClass("current");
});
}
else{
$(".active").removeClass("active").next().addClass("active");
$(".active").show();
$(".slides").animate({marginLeft:-activeWidth},1000,function() {
$(".slides").css({"margin-left":"0px"});
$(".active").prevAll().hide();
$(".active").nextAll().hide();
$(".current").removeClass("current");
var activeIndex = $(".active").index();
$(".control p").eq(activeIndex).addClass("current");
});
}
});
});

How to change jQuery feature tabs script from display none to absolute positioning off the page?

I'm fairly new to jQuery and I'm using the script below. Basically it uses two unordered lists to create tab functionality (one for tabs, one for content). Right now when you click through the tabs, the output is switched from "display:list-item;" to "display:none;". I'm trying to change this to "position:absolute;left:-10000px;" and "position:relative;left:0;" so that all the content gets rendered but just moves off the page rather than be hidden.
I'm having the issue you see at the bottom of the page here http://jqueryui.com/demos/tabs/ except it's not being controlled in the CSS. It's being controlled in the script below somehow that I'm unfamiliar with. Any help would be appreciated.
//INITIALIZATION
$.featureList(
$(".tabs li a"),
$(".output > li"), {
start_item : 0
}
);
//SCRIPT
(function($) {
$.fn.featureList = function(options) {
var tabs = $(this);
var output = $(options.output);
new jQuery.featureList(tabs, output, options);
return this;
};
$.featureList = function(tabs, output, options) {
function slide(nr) {
if (typeof nr == "undefined") {
nr = visible_item + 1;
nr = nr >= total_items ? 0 : nr;
}
tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');
output.stop(true, true).filter(":visible").fadeOut();
output.filter(":eq(" + nr + ")").fadeIn(function() {
visible_item = nr;
});
}
var options = options || {};
var total_items = tabs.length;
var visible_item = options.start_item || 0;
options.pause_on_hover = options.pause_on_hover || true;
options.transition_interval = options.transition_interval || 0;
output.hide().eq( visible_item ).show();
tabs.eq( visible_item ).addClass('current');
tabs.click(function() {
if ($(this).hasClass('current')) {
return false;
}
slide( tabs.index( this) );
});
if (options.transition_interval > 0) {
var timer = setInterval(function () {
slide();
}, options.transition_interval);
if (options.pause_on_hover) {
tabs.mouseenter(function() {
clearInterval( timer );
}).mouseleave(function() {
clearInterval( timer );
timer = setInterval(function () {
slide();
}, options.transition_interval);
});
}
}
};
})(jQuery);

The action in that script is happening with .FadeIn and .Fadeout, which animate opacity. Fadeout applies display:none at the end of the opacity animation. Correspondingly, FadeIn only works on elements that are set to display:none. Fadein just won't work on visibility: hidden or opacity:0. Check out the jquery documentation, it's mostly pretty good.
So you want to substitute a css position change for those two lines of code. There are a bunch of different ways to do this, depending mostly on whether or not you want the elements to animate off the page of just leap there.
Also FYI The easiest way to share this sort of stuff for troubleshooting is to make a jsfiddle with a reduced subset of your code, just the relevant stuff, and then everybody can poke away at it until it works. :)