We Keep Coding

Javascript&Jquery why can't my animate() work?

I've written some code, which is shown beneath. I couldn't figure out why hideDialog() can work, but showDialog() doesn't work.Can anybody tell me what wrong is with my code, or give me some information to search? Thanks:)
Here is the error message:
Uncaught TypeError: $(...).showDialog is not a function
function showDialog(){
this.animate({
top:50
},{
duration:400,
effect:'slide',
easing:'easeOutBack'
});
}
function hideDialog(){
this.animate({
top:-200
},{
duration:400,
effect:'slide',
easing:'easeInBack'
});
}
function initSetting(){
$('.form-control').change(function(){
$('#myAlertDialog').showDialog();
$('#myAlertDialog').find('btnOk').on('click',function(){
$('#myAlertDialog').hideDialog();
});
});
}

Try to re frame your code like this,
function showDialog($this){
$this.animate({
top:50
},{
duration:400,
effect:'slide',
easing:'easeOutBack'
});
}
function hideDialog($this){
$this.animate({
top:-200
},{
duration:400,
effect:'slide',
easing:'easeInBack'
});
}
function initSetting(){
$('.form-control').change(function(){
showDialog($('#myAlertDialog'));
$('#myAlertDialog').find('btnOk').on('click',function(){
hideDialog($('#myAlertDialog'));
});
});
}
Or read this question to know how to create user defined functions on top of jquery.

use $.fn.showDialog() instead of just function showDialog().
use $.fn.hideDialog() instead of just function hideDialog().
You're trying to extend the jQuery prototype.
Please see What is $.fn.function and Plugins
How to Create a Basic Plugin

Try to frame your code like this. Further, read about the difference between this and $(this) in jQuery.
function showDialog(item){
$(item).animate({
top:50,
duration:400,
effect:'slide',
easing:'easeOutBack'
});
} // end of showDialog
function hideDialog(item){
$(item).animate({
top:-200,
duration:400,
effect:'slide',
easing:'easeInBack'
});
} // end of hideDialog
function initSetting(){
$('.form-control').change(function(){
showDialog($('#myAlertDialog'));
$('#myAlertDialog').find('btnOk').on('click',function(){
hideDialog($('#myAlertDialog'));
});
});
}
// btnOK should have a # or . for the identifier.
// if the click event does not work, then try with the delegate() function. http://api.jquery.com/delegate/

"Uncaught TypeError: Cannot use 'in' operator " using value $(this)

When i go in the page, in console appear: Uncaught TypeError: Cannot use 'in' operator to search for 'height' in undefined,
and before the value of 0 (from the line console.log(i); )
I want to call ajax on "i" after I clicked on the element.
I don't understand why apper Uncaught TypeError, and why it enter in loadSingleIns(i) without any click.
The script is:
..... success: function(response) {
console.log(JSON.parse(response));
var instructor=JSON.parse(response);
var el="";
for(var i=0;i<instructor.length;i++){
$(document).on ("click", ".insegnanti#i"+[i+1], loadSingleIns(i));
....
And the function called is:
function loadSingleIns(i){
console.log(i);
$(this).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// Animation complete.
});
//here i want to call ajax for the element i
}
I know there are some questions like this, but I can't find a solution.

Don't need to pass params in loadSingleIns function, element reference and Event automatic pass in function..
$(document).on ("click", ".insegnanti#i"+[i+1], loadSingleIns);
or if you really want to pass params then call function inside callback function
$(document).on ("click", ".insegnanti#i"+[i+1], function(Event){
loadSingleIns(Event, this);
});
// function with 2 params
function loadSingleIns(e, refe){
console.log(e, refe)
}

You probably need to pass the handler reference in third parameter of on where you are call the function loadSingleIns
$(document).on ("click", ".insegnanti#i"+[i+1], loadSingleIns);
To get the i from id you can use following code.
function loadSingleIns(){
i = this.id.replace('i','');
}
As a additional note you may thing about the selector, ".insegnanti#i"+[i+1] as the ids are supposed to be unique you can remove the class selector from the selector.

As I mentioned in my comment this code
for(var i=0;i<instructor.length;i++){
$(document).on ("click", ".insegnanti#i"+[i+1], loadSingleIns(i));
aside from the loadSingleIns(i) issue - doesn't look right at all. That's not really how you should be using classes. Perhaps you meant to use id attributes instead...
Assuming all those elements are on the page already you can get rid of the loop altogether, bundle those elements using the same class, and have the id of the element in a separate attribute:
HTML
<div class="insegnant" data-id="1">Element 1</div>
<div class="insegnant" data-id="2">Element 2</div>
JS
$(document).on('click', '.insegnanti', loadSingleIns);
function loadSingleIns() {
var id = $(this).data('id');
$(this).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// when the animation has completed run the ajax
// this example adds the id on to the end of the URL
// you can move this function outside of the animation if you want
// I thought it would be better here
$.ajax({
url: 'http://demo.com/id=' + id
...
success: function (data) {
// do something with data
}
});
});
}

call command after animate command is done

I want to know how can i call up the 2nd line after the animate function is done? Now the 2nd line starts before the animate function is done.
Can someone help me?
$(".intro").animate({height:'100%', width:'100%'}, 6000);
$(".intro").append("<div class='text'>Some Text</div>")
$(".text").css({"background":"#FFFF00" , "height":"23px","width":"300px","position":"absolute","top":"0","left":"0","bottom":"0","left":"0","margin":"auto"});

Use this code snippet - add a callback.
Complete Function : If supplied, the complete callback function is fired once the animation is complete.
$(".intro").animate({height:'100%', width:'100%'}, 6000, function(){
$(this).append("<div class='text'>Some Text</div>");
});
Refer this Link: .animate() for More examples.

Use callback function for animate:
$(".intro")
.animate(
{height:'100%',width:'100%'},
6000,
function(){
$(".intro").append("<div class='text'>Some Text</div>");
}
);

Jquery css(width, 0) not working if the element is hidden

I have created a quick jsfiddle here showing it not working.
The problem I have is with the slide up. I want it to work so that it only sets the width to 0 after the slideup has finished. The obvious callback function does not seem to be getting called after the slideup has finished.
I would like it to work like this:
Shows the red box by sliding down and increasing the width together.
Click again and the box slides up then sets the width the 0. So that if the user clicks the button again the first animation would appear the same.
var $foo = $("#elm");
$("#btn").toggle(function() {
showDropDown();
}, function() {
hideDropDown();
});
function showDropDown(){
$foo.slideDown({duration:500, queue:false}).animate({"width": 400}, 250);
}
function hideDropDown(){
$foo.slideUp({duration:800, queue:false},function(){
$foo.css({"width": 0});
});
}
UPDATE:
The strange thing is that if I add a alert() into the callback function for slidedown it never gets called.

Edit: Sorry for the first answer, didn't pay attention.
The problem is that the callback is not executed, because you don't give the parameters according to the API, and the callback is not "wired" in.
Instead, you can use the promise().done(...) combination to achieve the objective you wanted.
So, you should modify your hideDropDown method as follows:
function hideDropDown(){
$foo.slideUp({duration:800, queue:false}).promise().done(function(){
$foo.css("width", "0px");
});
}
From the jQuery docs:
"The .promise() method returns a dynamically generated Promise that is resolved once all actions of a certain type bound to the collection, queued or not, have ended."

Maybe you just need to use animate to reset width to 0 like this:
var $foo = $("#elm");
$("#btn").toggle(function() {
showDropDown();
}, function() {
hideDropDown();
});
function showDropDown(){
$foo.slideDown({duration:500, queue:false}).animate({"width": 400}, 250);
}
function hideDropDown(){
$foo.slideUp({duration:800, queue:false}).animate({"width": 0}, 1);
}
or set width to 0 like this:
function hideDropDown(){
$foo.slideUp({duration:800, queue:false}).width(0);
}

Why not chain .animate() after .slideUp()?
$foo.slideUp({duration: 800, queue: false}).animate({"width": 0}, 800);

Calling user-defined function on jQuery object

I want the color of the text to change when I click it. This is the code I'm using right now:
$(document).ready(function() {
$("#colorChanger p").click(function() {
$(this).changeColor();
});
function changeColor() {
$(this).css("color", "white");
};
})
I also have this code on JSFiddle. What's wrong with my code?

Updated the fiddle: http://jsfiddle.net/xME2L/5/
If you wish to add a function so you can call it on whatever is returned from $(), you must use:
$.fn.functionName = function() {}

Here is my solution. You were not passing the object correctly to the changeColor function. I would also recommend declaring changeColor outside of the document.ready function.

As an alternative to agmcleod's solution, you could call changeColor this way (without changing changeColor):
changeColor.call(this);
Demo the change here.

You should define changeColor as a JQuery plugin if you want to call it like $(this).changeColor(); :
$(document).ready(function(){
$("#colorChanger p").click(function(){
$(this).changeColor();
});
$.fn.changeColor = function() {
this.css("color","white");
};
})

The changecolor function was never assigned to the jquery el object.
An alternative to agmcleod's solution would be :
$(document).ready(function(){
$("#colorChanger p").click(function(){
changeColor($(this));
});
function changeColor(el){
el.css("color","white");
};
});
http://jsfiddle.net/dq6yv/