We Keep Coding

jQuery animation infinite doesn't work

I've got this code
var goRight = function() {
$(this).animate({'left:' '40px'}, 1000, goLeft);
};
var goLeft = function() {
$(this).animate({'left:' '-40px'}, 1000, goRight);
};
var main = function() {
$('.square').hover(function() {
$(this).toggleClass('active');
});
$('.square').goRight();
};
$(document).ready(main);
It supposed to move the square(a div) to the right then back to the left infinitely and make it blue when the user hovers over it. But it doesn't work. The problem is probably in the goRight and goLeft, functions. Since if I remove them completely the hover changes the color fine. And when these functions are there nothing works.

You need to do the chaining like this
$.fn.goRight = function() {
this.animate({
'left': '40px'
}, 1000, function() {
$(this).goLeft()
});
return this;
};
$.fn.goLeft = function() {
this.animate({
'left': '-40px'
}, 1000, function() {
$(this).goRight()
});
return this;
};
var main = function() {
$('.square').hover(function() {
$(this).toggleClass('active');
});
$('.square').goRight();
};
$(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="width:100px;height:100px;background:black;position:relative;" class="square"></div>
For more about jQuery plugin development : https://learn.jquery.com/plugins/basic-plugin-creation/

Two the same popup plugins not working on one page

I am using popup plugin presented by some user of stackoverflow.
It works perfectly, but I wanted to add another one on the same page and it does some strange things. The first one works fine, the second one opens, but when i want to close it, it opens the first one instead. Could someone give me any clue please? I have changed all the classes, IDs etc
First one:
...
<a href='/contact' class='menuButton' id='contact'>KONTAKT</a>
<div class="messagepop pop">
<p>popup message1</p>
</div>
...
<script>
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#contact').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#contact'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
</script>
Secone one:
...
<a href='/contact2' class='menuButton' id='contact2'>BILETY</a>
<div class='messagepop2 pop2'>
<p>popup message 2</p>
</div>
...
<script>
function deselect(e) {
$('.pop2').slideFadeToggle(function() {
e.removeClass('selected2');
});
}
$(function() {
$('#menuButtonBilety').on('click', function() {
if($(this).hasClass('selected2')) {
deselect($(this));
} else {
$(this).addClass('selected2');
$('.pop2').slideFadeToggle();
}
return false;
});
$('.close2').on('click', function() {
deselect($('#menuButtonBilety'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
</script>
EDIT: The script comes from the best answer HERE

In your case probably you are overriding the deselect function.
But instead of multiply your code one for each element instance you can set it more general using DOM structure hierarchy, like:
function deselect(e) {
e.next('.pop').slideFadeToggle(function () {
e.removeClass('selected');
});
}
$(function () {
$('.menuButton').on('click', function () {
if ($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$(this).next('.pop').slideFadeToggle();
}
return false;
});
});
$.fn.slideFadeToggle = function (easing, callback) {
return this.animate({
opacity: 'toggle',
height: 'toggle'
}, 'fast', easing, callback);
};
Demo: http://jsfiddle.net/IrvinDominin/u2fkff64/

jquery animate complete function executing before animation is comlete

i want to remove li of ul after animation is completed but
it makes li remove before completion. Please help me what to do to solve it
$('#btnGo').click(function() {
var $ulCust = $('#divCust ul');
$ulCust.find('li:first').animate({
opacity: 0.25,
left: 915
}, 'slow', function() {
//this function executes before animation completes
$('#btnGo').delay(2000).html('Complete'); //this delay is also not working
console.log('complete');
//$(this).delay(100000).remove();
});
})
});

Try this
$('#btnGo').click(function () {
var $ulCust = $('#divCust ul');
$ulCust.find('li:first').animate({
opacity: 0.25,
left: 915
complete: function () {
$('#btnGo').html('Complete');
}
});
});

How to fire event after 3 sec of hovering

I have a div and I want to fire an event only after user continuous hovers his mouse for 3 sec. My code doesn't work well because it fires right after hover and doesn't "wait".
Code:
$(".inner_pic").mouseenter(function () {
setTimeout(function () {
alert('testing');
}, 3000);
}).mouseleave(function () {
alert('finish');
});

You need to store timeout id somewhere and clear it on mouseout. It's convenient to use data property to save this id:
$(".inner_pic").mouseenter(function () {
$(this).data('timeout', setTimeout(function () {
alert('testing');
}, 3000));
}).mouseleave(function () {
clearTimeout($(this).data('timeout'));
alert('finish');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">PICTURE</div>

You can achieve this by delay option:
Working demo
$('#elem').popover({
trigger: "hover",
delay: {show : 3000, hide : 0} });

Checkout the below code
var myVar;
$( "div#container" )
.mouseover(function() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
})
.mouseout(function() {
clearTimeout(myVar);
});
div {
background: red;
margin: 20px;
height: 100px;
width: 100px;
display:block;
cursor: pointer;
}
div:hover {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

var st;
$(".inner_pic").mouseenter(function(e) {
var that = this;
st = setTimeout(function() {
alert('testing');
}, 3000);
}).mouseleave(function() {
clearTimeout( st );
alert('finish');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">
<h3>Picture Here - Hover me</h3>
</div>

Assuming you have a div with id of myelement, you can do this:
var divMouseOver;
$('#myelement').mouseover(function() {
divMouseOver = setTimeout(function() {
alert("3 seconds!"); //change this to your action
}, 3000);
});
$('#myelement').mouseout(function() {
if (divMouseOver) {
clearTimeout(divMouseOver);
}
});
BTW, tere's a helpful clarifying question re: using mouseenter and mouseover right here: Jquery mouseenter() vs mouseover(). Consider this when choosing which to use.

Onclick is not working

Why will this code not work as an onclick ?
$('.mainz11').click (function() {
$(this).animate({
height: '280px'
}, 800);
}, function() {
$(this).animate({
height: '100px'
}, 800);
});

If you're trying to first expand the element and then contract it, it should probably be something like this:
$('.mainz11').click(function() {
// determine target heights
if ($(this).hasClass("expanded")) {
var targetHeight = 100;
} else {
var targetHeight = 280;
}
// animate
$(this).animate({
height: targetHeight
}, {
duration: 800,
complete: function() { $(this).toggleClass("expanded"); }
});
});
This could use some cleaning up, but it does the trick, and you can track expanded items easily this way.
See here: http://jsfiddle.net/mpQek/3/

The click function takes only a single function but you are passing 2 functions to it. You can try it this way:
$('.mainz11').click (function() {
$(this).animate({
height: '280px'
}, 800);
});

If you want to chain animations, put the next animation as the function to run on complete of the first animation:
http://api.jquery.com/animate/
$('.mainz11').click (function() {
$(this).animate({ height: '280px', 800,
function() { $('.mainz11').animate({ height: '100px'}, 800)
);
});