Develop Reference

jquery fade in/out in same space

I am making a site where I have a tabbed area (three tabs) which when hovered on, fade in different height divs.The page loads with the divs hidden and are only to fade in the corresponding div when the link is hovered on. If any div is already shown, it should fade out (or ideally appear to fade into the next div).I've already formed two methods but they have messy results, especially when dragging the mouse randomly across the links; too many divs appear and animations run before others finish.Any ideas on how I can make this work would be greatly appreciated; so what's there is replaced with the next div.Here's whats failed so far:
Version 1
$(function () {
$('#one-box').hide();
$('#two-box').hide();
$('#three-box').hide();
// Box one
$('#one-link').hover(function () {
$('#two-box').fadeOut(300);
$('#three-box').fadeOut(300);
$('#one-box').delay(400).fadeIn(300);
});
// Box two
$('#two-link').hover(function () {
$('#one-box').fadeOut(300);
$('#three-box').fadeOut(300);
$('#two-box').delay(400).fadeIn(300);
});
// Box three
$('#three-link').hover(function () {
$('#one-box').fadeOut(300);
$('#two-box').fadeOut(300);
$('#three-box').delay(400).fadeIn(300);
});
});
Version 2
$(function () {
$('#one-box').hide();
$('#two-box').hide();
$('#three-box').hide();
// Box one
$('#one-link').hover(function () {
$('#two-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('#three-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('#one-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow');
});
});
});
// Box two
$('#two-link').hover(function () {
$('#one-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('#three-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('#two-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow');
});
});
});
// Box three
$('#three-link').hover(function () {
$('#one-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('two-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('#three-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow');
});
});
});
});

Try decreasing your fadeOut time:
$('#one-link').hover(function () {
$('#two-box').fadeOut(100);//100 ms as an example
$('#three-box').fadeOut(100);
$('#one-box').delay(400).fadeIn(300);
});
or you can try as a crude solution:
$('#one-link').hover(function () {
$('#two-box, #three-box').fadeOut(300, function() {
$('#one-box').fadeIn(300);
});
});

jquery - Buttons resize fixed divs in fixed percentage web app?

I've been fighting with this for a few hours now (I'm a bit new to js) and I decided to put it up to the community. I have this web app I'm building that is all based on percentages of screen sizes. The divs are fixed position, contents absolute within those divs. Here is the fiddle: http://jsfiddle.net/MycF6/31/ and the code I'm working with:
$(document)
.ready(function () {
$("#socialDash")
.click(function () {
$("#socialStream")
.hide("slide", {
direction: "left"
}, "1000");
});
});
$("#socialDash")
.click(function () {
$("#workBench")
.effect("scale", {
percent: 178,
origin: ['middle', 'right'],
direction: 'horizontal'
}, 700);
});
$("#niner")
.click(function () {
$("#socialStream")
.show("slide", {
direction: "left"
}, "1000");
$("#workBench")
.effect("scale", {
percent: 56,
origin: ['middle', 'right'],
direction: 'horizontal'
}, 500);
});
$(".socialButton")
.click(function () {
$("socialButton")
.removeClass(".clicked");
$(this)
.addClass(".clicked");
});
I want it so when I click the top button on the left (1) the left div of the inside content slides left and the div on the right expands to take its place. For the other two buttons (2),(3), I want the divs in original proportion. The other issue is when buttons (imgs) are clicked they have background that remains persistent instead of swapping to the next clicked button as I have tried to identify in that last bit of code.
Any help would be greatly appreciated. Thanks in advance!

Okay, I found a solution (basically I rewrote everything). It isn't pretty, but it works. Here is the new jfiddle: http://jsfiddle.net/MycF6/42/ if you are interested.
And the script:
$(document).ready(function () {
$("#dash").click(function () {
$("#stream").animate({
width: "0"
}, "fast").hide("slide", {
direction: "left"
}, "fast");
$("#dash").addClass("clicked");
$("#fb").removeClass("clicked");
$("#twit").removeClass("clicked");
$("#work").animate({
width: "100%"
}, "slow");
});
$("#twit").click(function () {
$("#work").animate({
width: "59%"
}, "fast");
$("#twit").addClass("clicked");
$("#dash").removeClass("clicked");
$("#fb").removeClass("clicked");
$("#stream").animate({
width: "40%"
}, "fast").show("slide", {
direction: "left"
}, "slow");
});
$("#fb").click(function () {
$("#work").animate({
width: "59%"
}, "fast");
$("#twit").removeClass("clicked");
$("#dash").removeClass("clicked");
$("#fb").addClass("clicked");
$("#stream").animate({
width: "40%"
}, "fast").show("slide", {
direction: "left"
}, "slow");
});
});

Do not execute function (click) until previous event is completed

Do not execute until previous is completed. If you click quickly, the script is incorrect. If I click several times, the function will be executed without waiting for completion. It becomes messy.
$(".vid1 .next, .vid2 .next").click(function(){
$(".type2").find(".crop").find(".left").find("div:last").clone().insertAfter($(".type1").find(".crop").find(".left").find("div:last"));
$(".type2 .crop .left div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").clone().insertBefore($(".type2").find(".crop").find(".left").find("div:first"));
$(".type2").find(".crop").find(".left").find("div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '0px'}, {
duration: 500,
complete: function() {
$(".type1").find(".crop").find(".left").find("div:first").remove();
$(".type1").find(".crop").find(".left").find("div:first").animate({marginLeft: '208px'}, 0);
}
});
$(".type2").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '208px'}, {
duration: 500,
complete: function() {
$(".type2").find(".crop").find(".left").find("div:last").remove();
}
});
});

You can initialize a variable to True when starting the Click, in Complete return it to False.
Every time he comes to click, check if True, then exit the function.
var isClicking=false;
$(".vid1 .next, .vid2 .next").click(function(){
if(isClicking)
return;
isClicking=true;
$(".type2").find(".crop").find(".left").find("div:last").clone().insertAfter($(".type1").find(".crop").find(".left").find("div:last"));
$(".type2 .crop .left div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").clone().insertBefore($(".type2").find(".crop").find(".left").find("div:first"));
$(".type2").find(".crop").find(".left").find("div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '0px'}, {
duration: 500,
complete: function() {
$(".type1").find(".crop").find(".left").find("div:first").remove();
$(".type1").find(".crop").find(".left").find("div:first").animate({marginLeft: '208px'}, 0);
}
});
$(".type2").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '208px'}, {
duration: 500,
complete: function() {
$(".type2").find(".crop").find(".left").find("div:last").remove();
isClicking=false;
}
});
});

Try to disable the button first and enable the button after finish.
$(".vid1 .next, .vid2 .next").click(function(){
$(this).attr("disabled", true);
$(".type2").find(".crop").find(".left").find("div:last").clone().insertAfter($(".type1").find(".crop").find(".left").find("div:last"));
$(".type2 .crop .left div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").clone().insertBefore($(".type2").find(".crop").find(".left").find("div:first"));
$(".type2").find(".crop").find(".left").find("div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '0px'}, {
duration: 500,
complete: function() {
$(".type1").find(".crop").find(".left").find("div:first").remove();
$(".type1").find(".crop").find(".left").find("div:first").animate({marginLeft: '208px'}, 0);
}
});
$(".type2").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '208px'}, {
duration: 500,
complete: function() {
$(".type2").find(".crop").find(".left").find("div:last").remove();
}
});
$(this).removeAttr("disabled");
});

moved to left and right after click?

My code does not work. What I want is to move my pagination to the left and to the right after #prev_pag and #next_pag are clicked on. I don't know why this code isn't working?
EXAMPLE: http://jsfiddle.net/szVKD/
JS code:
$('#next_pag').click(function() {
$('#pagination').animate({
marginLeft: '-=100px'
},
500);
});
$('#prev_pag').click(function() {
$('#pagination').animate({
marginLeft: '+=100px'
},
500);
});
});

Try to animate not 'marginLeft' but 'left';
EXAMPLE:
http://www3.montonfashion.com/js/slider/carouselPP.js
http://www3.montonfashion.com/et/waistcoat-willy.html

you nedd to play with left not marginleft...see here
$('#next_pag').click(function() {
$('#pagination').animate({
left: '-=100px'
},
500);
});
$('#prev_pag').click(function() {
$('#pagination').animate({
left: '+=100px'
},
500);
});
});

$('#next_pag').click(function(e) {
e.preventDefault(); //prevent the default behaviour
$('#pagination').animate({
left: '-=100px'
},
500);
});
$('#prev_pag').click(function(e) {
e.preventDefault(); //prevent the default behaviour
$('#pagination').animate({
left: '+=100px'
},
500);
});
});

Mootools - one Fx.Morph object for different effects? ... Also Morph onComplete

I'm having trouble with a Mootools Fx.Morph object. I expected I'd be able to use a single object several times to create different effects. I'd like to toggle the effect on a single div. But my effect only fires the first time. Are there any Fx.Morph wizards out there who could advise?
This is my class
var F = new Class({
Implements: [Options, Events],
myFX: null,
dDiv: null,
options: {
container: null,
width: '250px',
background: '#ccc'
},
initialize: function(options) {
this.setOptions(options);
this.addDemoDiv();
},
addDemoDiv: function() {
var dDiv = new Element('div', {
'class': 'myClass',
html: 'Click me!',
styles: {
padding: '20px',
border: '1px solid #999',
width: this.options.width,
background: this.options.background
},
events: {
click: this.animate.bind(this)
}
});
if (!this.container) {
this.dDiv = dDiv.inject(document.body);
} else {
this.dDiv = dDiv.inject(this.container);
}
this.myFx = new Fx.Morph(dDiv);
},
animate: function(e) {
this.dDiv.set('html', 'Hello world');
this.myFx.start({
height: 200,
width: 500,
link: 'cancel',
onComplete: function(){
this.dDiv.removeEvent('click', this.animate);
this.dDiv.addEvent('click', this.deanimate.bind(this));
}.bind(this)
});
},
deanimate: function(e) {
this.dDiv.set('html', 'Click me!');
this.myFx.start({
height: 20,
width: 250,
link: 'cancel',
onComplete: function() {
this.dDiv.removeEvent('click', this.deanimate);
this.dDiv.addEvent('click', this.animate.bind(this));
}.bind(this)
});
}
});
window.addEvent('domready', function() {
var item = new F({cntainer: 'container', background: '#ddd', width: '250px'});
});
I've tried quite a few things, including giving up on the Fx.Morph property and just calling .morph on the div with each click. This seemed to cause horrendous browser problems, maybe because it was creating a new Morph oject with each click and leaking memory.
The deanimate() method is definitely being called, because this.dDiv.set('html', 'Click me!'); is working. But the div won't shrink back. I've tried applying other effects, like background colour, but they're ignored too.
Does this mean an Fx.Morph object is destroyed after you run start()?
The onComplete handler of Fx.Morph also doesn't behave as you would expect. When I put a console.log in the onComplete of the animate() method, the log message gets displayed long before the animation's finished. So is onComplete just when the parsing of the script is complete?
Or is this just me being a chump? Any pointers gratefully received!
======================
Added later
I've been able to get around this problem by losing the Fx.Morph object and animating with .morph and a toggle variable, like this
animate: function(e) {
if (!this.anim) {
this.dDiv.set('html', 'Hello world');
this.dDiv.morph({
background: '#666',
width: 500,
height: 250
});
this.anim = true;
} else {
this.dDiv.set('html', 'Click me!');
this.dDiv.morph({
background: '#eee',
width: 250,
height: 100
});
this.anim = false;
}
}
But if anybody can shed any light on why the first version wasn't working I'd be very grateful!

this is an error in binding and removeEvent.
this.animate.bind(this) returns a function that is NOT the same as this.animate which you compare against when you removeEvent.
if you bind event callbacks that you need to remove, you should store them:
http://jsfiddle.net/yLhHG/ (incomplete but it does first shrink. read more:
basically:
this.boundEvents = {
click: this.animate.bind(this)
};
...
this.dDiv.removeEvent('click', this.boundEvents.click);
or:
this.dDiv.addEvent('click', this.boundEvent = this.animate.bind(this));
...
this.dDiv.removeEvent("click", this.boundEvent);
and finally:
you can totally rewrite this to have a single method but pass a different object. will update it in a moment.
there: http://jsfiddle.net/yLhHG/1/
var F = new Class({
Implements: [Options, Events],
myFX: null,
dDiv: null,
options: {
container: null,
width: '250px',
background: '#ccc',
fx: {
animate: {
props: {
height: 200,
width: 500
},
html: "hello world"
},
deanimate: {
props: {
height: 20,
width: 250
},
html: "bye world"
}
}
},
initialize: function(options) {
this.setOptions(options);
this.container = this.options.container || document.body;
this.addDemoDiv();
},
addDemoDiv: function() {
this.element = new Element('div', {
'class': 'myClass',
html: 'Click me!',
styles: {
padding: '20px',
border: '1px solid #999',
width: this.options.width,
background: this.options.background
},
events: {
click: this.animate.bind(this)
},
morph: {
link: "cancel",
onComplete: function() {
}.bind(this),
onStart: function() {
this.element.set("html", this.options.fx[this.action].html);
}.bind(this),
onCancel: function() {
//
}
}
}).inject(this.container);
},
animate: function(e) {
this.action = this.action == "animate" ? "deanimate" : "animate";
this.element.morph(this.options.fx[this.action].props);
}
});
new F({
cntainer: 'container',
background: '#ddd',
width: '250px'
});