Develop Reference

jQuery setupSearchButton animate broken after 2 times clicking on it

I have a search button on my website, i have a function that wil animate my input field when clicking by moving it to the right. And if i click out of it then it wil close.
This works only after like 2 times open/close it is broken and won't animate anymorge. I added a console.log(); so i can see what its doing.
Here is my function.
function setupSearchButton()
{
j(".icon").click(function() {
var icon = j(this),
input = icon.parent().find("#search"),
submit = icon.parent().find(".submit"),
is_submit_clicked = false;
j(".searchform").animate({ "margin-left": "+=180px", "display": "block !important" }, "slow", function(){
console.log("Move the searchbar to the right 180px;");
});
// Animate the input field
input.animate({
"width": "165px",
"opacity": 1
}, 300, function() {
input.focus();
});
submit.mousedown(function() {
is_submit_clicked = true;
});
// Now, we need to hide the icon too
icon.fadeOut(300);
input.blur(function() {
if(!input.val() && !is_submit_clicked) {
input.animate({
"width": "0",
"padding": "0",
"opacity": 0
}, 200);
// Get the icon back
icon.fadeIn(200);
j(".searchform").animate({ "margin-left": "-=180px", "display": "block !important" }, "slow", function(){
console.log("Move the searchbar back by adding a negative -180px to the left.");
});
};
});
});
}
Also i'm using "noconflict".
So what i'm doing wrong here ?.
Thx

Check if the field is animated. if it is animated then return otherwise apply animation. Try with below code sample inside click function.
input = icon.parent().find("#search");
if(input.is(":animated")){
// return if Animate applied.
return;
}
else
{
// Animate the input field
input.animate({
"width": "165px",
"opacity": 1
}, 300, function() {
input.focus();
});
}

Either of JQuery .css() or .hover() not working

My Code (Launch in full window).
My JS Code:
$(document).ready(function () {
$("#play_buttton").hover(
function () {
$('#play_button').css({ "height": "240px", "width": "250px" });
},
function () {
$('#play_button').css({ "height": "225px", "width": "220px" });
}
);
});
I think that this code must be creating the problem.
Problem: When , I hover over the image (#play_button) , nothing happens and its height and width don't change.Can anyone tell me how do I fix that.
Thanks.

It will be play_button not play_buttton
$(document).ready(function () {
$("#play_button").hover( // Here not play_buttton
function () {
$(this).css({ "height": "240px", "width": "250px" });
},
function () {
$(this).css({ "height": "225px", "width": "220px" });
}
);
});
See this sample FIDDLE.
You can also .animate it like in this FIDDLE2

Wrong spell at $("#play_butt*t*on").hover

jquery slide animations going out of sync

I currently have a carousel slider which contains some text. When the user clicks the 'next' button the .carousel-text div sides up hiding the text, the carousel moves to the next slide then the .carousel-text on the next slide slides down to reveal the text.
This works fine some of the time but sometimes it will go wrong and the text will slide up and down before the carousel moves on. I'm assuming this is because the next button is clicked before the whole sequence has finished (the whole thing takes 2 seconds). Is there a way to make sure the whole thing is complete before it is called again?
jQuery("#arrow-right").click(function () {
jQuery('.carousel-text').animate({
marginTop: "-260px"
}, 500, function() {
jQuery('.carousel-inner').animate({
marginLeft: "-700px"
}, 1000, function() {
jQuery('.carousel-text').animate({
marginTop: "0px"
}, 500, function() {
// Animation complete.
});
});
});
}
EDIT: Just made a jsfiddle here: http://jsfiddle.net/UGE44/

Place a ".stop(true, true)" before you animate. This will stop the previous animations and allow the new ones to start all at the same time. Would look something like this:
jQuery('.carousel-text').stop(true, true).animate({
marginTop: "-260px"
}, 500, function() {
jQuery('.carousel-inner').stop(true, true).animate({
marginLeft: "-700px"
}, 1000, function() {
jQuery('.carousel-text').stop(true, true).animate({
marginTop: "0px"
}, 500, function() {
// Animation complete.
});
});
});
Your may want to play around with which animates you place them before, as it may not need to be in all three spots.

Set "animating" flag before animate and clear it when animation is done.
jQuery("#arrow-right").click(function () {
var $text = jQuery('.carousel-text');
if ($text.data('animating') !== true) {
$text.data('animating', true)
.animate({
marginTop: "-260px"
}, 500, function() {
jQuery('.carousel-inner').animate({
marginLeft: "-700px"
}, 1000, function() {
jQuery('.carousel-text').animate({
marginTop: "0px"
}, 500, function() {
$text.data('animating', false);
// Animation complete.
});
});
});
}
}

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

How to change color of div after first transition

Here is my Code. Initially Div color is black I want it to be changed after div totally has been slided towards right but it changes instantly when i click go button. Solution please ...
$("#go").click(function () {
$("#subdiv").animate({ "left": "+=75%" }, 1500);
$('#subdiv').css("background-color", "#293955");
$("#subdiv").animate({ "left": "-=75%" }, 1500);
}
);

use a callback for the animation that manipulates the element only after the animation has finished :
$("#go").click(function () {
$("#subdiv").animate({ "left": "+=75%" }, 1500,function(){
$('#subdiv')
.css("background-color", "#293955")
.animate({ "left": "-=75%" }, 1500);
}
);
}