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);
});
});

Push content javascript content

How can i push my content the same as another content? OK i know the question seems kind of vague but what I want to do is push my content like the way another script is pushing its content. What is doing when clicking the button it will push the content from the side causing the div to contract. I am not too far so maybe somebody can help. This is the script that works:
$(function(){
var $trigger = $(".icon-menu-2");
var $menu = $(".c_left");
$trigger.toggle(function show() {
$menu.animate({ width: 185, marginLeft: 0, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginLeft:185, display:'toggle'}, 'slow');
}, function hide() {
$menu.animate({ marginLeft: -185, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginLeft:0, display:'toggle'}, 'slow');
});
})
http://jsfiddle.net/Ndvbn/2/
Here is the script that needs just a small touch up so that it will push the content just like the script above does when clicking on test. Here is the script:
var timer;
$("#slideout").animate({right:'0px', queue: false, duration: "slow"}, function () {
timer = setTimeout(function () {
$("#slideout").animate({right:'-280px'}, {queue: false, duration: "slow"})
}, 500);
});
$("#clickme2").click(function () {
if ($("#slideout").css("right") == "-280px"){
$("#slideout").animate({right:'0px'}, {queue: false, duration: 500}, function () {
clearTimeout(timer);
});
} else {
$("#slideout").animate({right:'-280px'}, {queue: false, duration: 500}, function () {
clearTimeout(timer);
});}
});
http://jsfiddle.net/5UpHk/4/
Can anybody post the code so that my second script will push the content to the left?

This script below will push the content to the left. I made a couple of changes to the CSS as well. Check out the demo and code here: http://jsfiddle.net/BdKhW/1/
var timer;
$("#slideout").animate({width:'275px'}, {queue: false, duration: "slow"}, function () {
timer = setTimeout(function () {
$("#slideout").animate({width:0}, {queue: false, duration: "slow"})
$(".c_left").animate({marginRight:0}, {queue: false, duration: "slow"})
}, 2000);
});
$(".c_left").animate({marginRight:'275px'}, {queue: false, duration: "slow"})
$("#clickme2").click(function () {
$("#slideout").animate({width:0}, {queue: false, duration: "slow"})
$(".c_left").animate({marginRight:0}, {queue: false, duration: "slow"})
});

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);
});
});

how to wait the execution of line in Javascript?

$("#div_id").click(function() {
$(this).effect("shake", { times:3 }, 300);
// Here I want wait that the div_id can complete its shake
alert('hello');
}
.delay I tried but it is not working.

$(this).effect("shake", { times:3 }, 300, function() {
// this will alert once the animation has completed
alert('hello');
});

If you're using jQuery UI, you should just be able to add a callback as the 4th parameter.
See: http://jqueryui.com/demos/effect/
$("#div_id").click(function() {
$(this).effect("shake", { times:3 }, 300, function(){
alert('hello');
});
}

$(this).effect("shake", { times:3 }, 300, function() {
alert('hello');
});

How to pass $(this) reference to a call back function?

I have the following animations in my web page:
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
$(this).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
Currently both the animations are running simultaneously. I want the second animation to run after the first one. I tried putting the second one inside the callback function, but cannot find a way to get the $(this) reference working. Any idea how to get this working?
Thanks in advance.

Your function is wrong, if you are declaring options, then the callback goes in the options object:
$(".anim-item").animate({
opacity: 1,
}, {duration: 1000, queue: true, complete: function() {
$(this).animate({
left: 200,
}, { queue: true, duration: 1000, complete: function() {
// Animation complete.
}});
}});
Also, don't make a global variable containing the item, that's just asking for trouble, especially as jquery will maintain it for you in this instance, if you need to declare a new variable for the object in chaining, generally you are not doing it right ;)

Two ways:
cache this in a local variable before calling .animate()
use .proxy() to pass your this reference to .animate()
example 1:
var func = function(){
var self = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
self.animate({});
});
};
example 2:
var func = function(){
$.proxy($(".anim-item").not(this).animate({
}), this);
};

Save it under a different name, like this:
var myThis = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
$(myThis).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
});
The closure of the inner function will make sure it's visible.

Make an alias for this via
var _this = this;
If you write a jQuery query $('.abc') and use functions like click, hover etc, this will always reference to current DOM node jQuery is processing.

Store this in a local variable.
var _this = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
// Animation complete. Next animation
$(_this).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
}
);

In a jQuery callback function this is always set to the DOM element that the function applies to.
If you want access to this in your first callback function you'll have to create a reference to it before you animate:
var self = this;
$(".anim-item").not(this).animate({
opacity: 0,
}, { queue: true, duration: 1000 } , function() {
$(self).animate({
left: 200,
}, { queue: true, duration: 1000 } , function() {
// Animation complete.
});
});