Develop Reference

Two jQuery popup close functions

I am trying to make a jQuery popup close function. But I have two different popup lightbox area. Problem is first popup close function not working but second popup close function is working.
First jQuery click close link is not working:
$('.kapat').click(function(){
close_box();
});
$('.degistiralani').click(function(){
close_box();
});
Second jQuery click close link is working:
$('.pclose').click(function(){
close_box();
});
$('.cover_change_wrap').click(function(){
close_box();
});
All of my jQuery code is here:
$(document).ready(function() {
$('.d_button').click(function(){
$('.degistiralani, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.alan').animate({'opacity':'1.00'}, 300, 'linear');
$('.degistiralani, .alan').css('display', 'block');
});
$('.kapat').click(function(){
close_box();
});
$('.degistiralani').click(function(){
close_box();
});
});
function close_box()
{
$('.degistiralani, .alan').animate({'opacity':'0'}, 300, 'linear', function(){
$('.degistiralani, .alan').css('display', 'none');
});
}
$(function(){
$('.b_c_d_button').click(function(){
$('.cover_change_wrap, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.kapak_degistirme_alani').animate({'opacity':'1.00'}, 300, 'linear');
$('.cover_change_wrap, .kapak_degistirme_alani').css('display', 'block');
});
$('.pclose').click(function(){
close_box();
});
$('.cover_change_wrap').click(function(){
close_box();
});
});
function close_box()
{
$('.cover_change_wrap, .kapak_degistirme_alani').animate({'opacity':'0'}, 300, 'linear', function(){
$('.cover_change_wrap, .kapak_degistirme_alani').css('display', 'none');
});
}

You have close_box() defined twice. You're overwriting the first definition. Give them different names and it should work. I changed your first one to close_box1()
$('.kapat').click(function(){
close_box1();
});
$('.degistiralani').click(function(){
close_box1();
});
function close_box1()
{
$('.degistiralani, .alan').animate({'opacity':'0'}, 300, 'linear', function(){
$('.degistiralani, .alan').css('display', 'none');
});
}

$(this) in animate() callback but with setTimeout

jQuery docs explicitly state that
If supplied, the complete callback function is fired once the
animation is complete. This can be useful for stringing different
animations together in sequence. The callback is not sent any
arguments, but this is set to the DOM element being animated.
Hence, this works fine:
$("button").click(function () {
$(this).next("div").stop(true, true).animate({
"opacity": 1,
"top": "36px"
}, 600, function () {
$(this).fadeOut("slow", function () {
$(this).css({
"top": 0,
"display": "block",
"opacity": 0
});
});
});
});
$(this)'s next sibling that is a div is first animated in, and then with a callback it is faded out again. However...!
When using a setTimeout in the fallback, this won't work. See this fiddle.
$("button").click(function () {
$(this).next("div").stop(true, true).animate({
"opacity": 1,
"top": "36px"
}, 600, function () {
setTimeout(function () {
$(this).fadeOut("slow", function () {
$(this).css({
"top": 0,
"display": "block",
"opacity": 0
});
});
}, 2000);
});
});
I need to use $(this).next() though, because I will be having multiple buttons on the page. How can I keep the delay of 2s but still use the $(this) selector?

For jQuery's animating methods, you can use delay():
$("button").click(function () {
$(this).next("div").stop(true, true).animate({
"opacity": 1,
"top": "36px"
}, 600, function () {
$(this).delay(2000).fadeOut("slow", function () {
$(this).css({
"top": 0,
"display": "block",
"opacity": 0
});
});
});
});
JSFiddle
NOTE: The reason that setTimeout() didn't work for you, is because this isn't referring to the element that you think it is, it's referring to the window. To do that, you'll need to first create a reference to this:
JSFiddle

Also a little bit of magic. You can bind "this" to the timeout function.
http://jsfiddle.net/h6E6z/5/
setTimeout(function () {
$(this).fadeOut("slow", function () {
$(this).css({
"top": 0,
"display": "block",
"opacity": 0
});
});
}.bind(this), 2000);

You could always just store $(this) in a variable and use it in the timeout function (I use "$" in front of variables storing a dom element - that is of course totally optional, I just like it that way...):
$("button").click(function () {
$(this).next("div").stop(true, true).animate({
"opacity": 1,
"top": "36px"
}, 600, function () {
var $next_div = $(this);
setTimeout(function () {
$next_div.fadeOut("slow", function () {
$next_div.css({
"top": 0,
"display": "block",
"opacity": 0
});
});
}, 2000);
});
});

how to animate height of a div back-jquery

I'm trying to show some part of a div and animate it to 100% when the div is clicked.
and I want to animate it back to the initial height of the div if it's clicked again.
this is what i have so far,but it doesn't work. can anyone help?
#mydiv {
height:150px;
width: 100%;
overflow:hidden;
}
<script type="text/javascript">
$(document).ready(function(){
$("#mydiv").click(function(){
$(this).animate({height: '100%'}, 300);
}, function() {
$(this).animate({height: '150px'}, 300);
});
});
</script>

click() doesn't accept two function arguments, previously there was a toggle() function that performed how you need it but it has now been deprecated and removed from jQuery.
Since your use case is pretty simple, I believe something like this would be enough:
$("#mydiv").click(function () {
var $this = $(this);
$this.animate({
height: $this.height() == 150 ? '100%' : 150
}, 300);
});
Demo fiddle

This should do the job for you.
jQuery:
$(document).ready(function() {
$("#mydiv").toggle(
function() {
$(this).animate({height: '100%'}, 300);
};
function() {
$(this).animate({height: 150}, 300);
});
});

jquery incomplete animation on hover

I am working on a navigation system for my site. The idea is to display the content when the parent is hovered.
But, when content is hovered fast, the animation is incomplete and it stops in between.
The complete working and code is in the demo link below. Any suggestions on the changing the code will be helpful.
DEMO: http://jsfiddle.net/vaakash/yH9GE/
When the "two" arrows are hovered at the same time (move fast from one
arrow to another) they stop and are incomplete
The code I used is
$('.anpn-wrap').mouseenter(function(){
$wrap = $(this);
$txt = $(this).find('.anpn-text');
$cnt = $(this).find('.anpn-cnt');
$txt.hide();
$cnt.css({ 'opacity': 0, 'margin-top': '-50px', 'width': '200px' });
$wrap.stop().animate({ 'width': $cnt.outerWidth() });
$cnt.show().animate({ 'opacity': 1, 'margin': 0});
});
$('.anpn-wrap').mouseleave(function(){
$wrap = $(this);
$txt = $(this).find('.anpn-text');
$cnt = $(this).find('.anpn-cnt');
$cnt.show().stop().animate({ 'opacity': 0, 'margin-top': '-50px' }, function(){
$cnt.hide();
$wrap.stop().animate({ 'width': $txt.outerWidth() });
$txt.fadeIn();
});
});​

By not localizing $wrap, $txt and $cnt, they will be global, hence if a mousenter event occurs before an earlier mouseleave animation has finished, these vars will be overwritten and the callbacks in the first animation will address the other button's elements.
The solution is to declare $wrap, $txt and $cnt with var, in both handlers.
Try this:
$('.anpn-wrap').mouseenter(function() {
var $wrap = $(this).stop();
var $txt = $wrap.find('.anpn-text').hide();
var $cnt = $wrap.find('.anpn-cnt').css({
'opacity': 0,
'margin-top': '-50px',
'width': '200px'
}).show().animate({
'opacity': 1,
'margin': 0
});
$wrap.animate({
'width': $cnt.outerWidth()
});
}).mouseleave(function() {
var $wrap = $(this);
var $txt = $wrap.find('.anpn-text');
var $cnt = $wrap.find('.anpn-cnt').show().stop().animate({
'opacity': 0,
'margin-top': '-50px'
}, function() {
$cnt.hide();
$wrap.stop().animate({
'width': $txt.outerWidth()
});
$txt.fadeIn();
});
});

I don’t know what you want instead, but you can pass arguments to stop() to force-complete the animation.
stop(true, true)
See this version: http://jsfiddle.net/yH9GE/2/

Why doesn't this simple toggle work?

Ok firstly - its not a toggle() as such.
This code is supposed to work like a slider. 1 Div is showing, you click a button, and the next div shows, click another button, and the first div shows.
This works so far, but it doesn't work going backwards. So the button works to show the 2nd Div, but hitting the 'less' button I made just makes the second div disappear and the 1st remains hidden.
Here is the code:
$('.more').click(function() {
$('.c1')
.animate({ left: "-828px" }, 600, 'easeInOutQuint')
.delay(300, function() {
$('.c2').animate({ left: "0px" }, 600, 'easeInOutQuint');
}
);
});
$('.less').click(function() {
$('.c2')
.animate({ left: "828px" }, 600, 'easeInOutQuint')
.delay(300, function(){
$('.c1').animate({ left: "0px" }, 600, 'easeInOutQuint');
}
);
});
What am I missing? And how could I do this so that I'm basically not repeating the same code twice?

have you tried with callback functions instead of delay ?
$('.more').click(function(){
$('.c1').animate({ left:"-828px"}, 600, 'easeInOutQuint',function(){
$('.c2').animate({left:"0px"}, 600, 'easeInOutQuint');
});
});
$('.less').click(function(){
$('.c2').animate({ left:"828px"}, 600, 'easeInOutQuint',function(){
$('.c1').animate({left:"0px"}, 600, 'easeInOutQuint');
});
});

You have a wrong concept about .delay.
In jquery documentation:
Description: Set a timer to delay execution of subsequent items in the queue.
And its parameters are: duration [, queueName].
Also, from SO answer:
The delay() function only applies to actions queued on the element
So I think your best choice is, as #nicolast said, use the callbacks. Here it is working. And the final code is:
$('.more').click(function() {
$('.c1')
.animate({ left: "-400px" }, 600, function() {
$('.c2').animate({ left: "0px" }, 600);
}
);
});
$('.less').click(function() {
$('.c2')
.animate({ left: "400px" }, 600, function(){
$('.c1').animate({ left: "0px" }, 600);
}
);
});

This reproduce works.
When pressing more: c1 goes to -100px and after that c2 goes to 0px
When pressing less: c2 goes to 100px and after that c1 goes to 0px
$('.more').click(function() {
$('.c1')
.stop()
.animate({ left: "-100px" }, 600, 'linear')
.delay(300, function() {
$('.c2').stop().animate({ left: "0px" }, 600, 'linear');
});
});
$('.less').click(function() {
$('.c2')
.stop()
.animate({ left: "100px" }, 600, 'linear')
.delay(300, function(){
$('.c1').stop().animate({ left: "0px" }, 600, 'linear');
});
});