Develop Reference

Swipe element down and up to delete/remove element using hammer.js and jQuery?

I'm trying to swipe an element up/down to delete it.
I am using hammer.js and jQuery.
So far I can delete the element using swipe left/right which works fine.
But I need to achieve the exact same thing using swipe up/down.
I have created this working example here:
https://codepen.io/anon/pen/YJPPyB
click on the button and an element will appear and then Swipe left/right to delete it.
With the code above, I tried the followings but it doesn't work as expected:
$toast.animate({ top: event.deltaX, opacity: opacityPercent }, { duration: 50, queue: false, specialEasing: 'easeOutQuad' });
and
$toast
.removeClass('panning')
.animate({ bottom: 0, opacity: 1 }, {
duration: 300,
specialEasing: 'easeOutExpo',
queue: false
});
Can someone please advice on this issue?
Thanks in advance.
EDIT:
When I change this:
hammerHandler.on('pan', function (event) {
To this:
hammerHandler.on('pandow', function (event) {
I can move the element when I pandown but I dont know why it is very wonky!
This is how I swipe down now but it somtimes freezes the whole page and I dont undertand why!
hammerHandler.on('pandown', function (event) {
// Change toast state
$toast.addClass('panning');
var opacityPercent = 1 - Math.abs(event.deltaX / activationDistance);
if (opacityPercent < 0)
opacityPercent = 0;
$toast.animate({ marginBottom: event.deltaX, opacity: opacityPercent }, { duration: 50, queue: false, specialEasing: 'easeOutQuad' });
});

DIV moving up and down using javascript

Good day,
I'm building a website where I would like to have a div moving down and back up on a click(clicking on another div area).
It regards the header of a page with an account image inside (the header contains from left to right: logo, horizontal menu, shopping cart and account symbol)
when I click the account symbol I want the header to slide down (60 pixels) and I want another div (with account related links in it) to show up above the header that just slid down.
I've achieved something but I'm really not happy with it:
<script>
jQuery(document).ready(function($){
$(".account").click(function);
$("#accountbar").slideToggle( "slow");
$("#topheader").toggleClass("topheader topheaderdown");
$("#contentarea").toggleClass("content contentdown");
});
});
</script>
1) So what this does it loads the new account bar (height 60px) and slides this one down.
2) It displays the topheader down another 60px (css style rule top: 60px)
3) It also displays the rest of the content (the main content) down 120 pixels lower than normal when both the account bar and topheader are being displayed (by default this value is 60px, so only for the topheader)
I want things to "smoothly" slide down and back up when clicking on the account image. I got this far (for the smoothly moving down the topheader part):
<script>
jQuery(document).ready(function($){
$("#account").on('click',function(){
$("#accountinner").toggle(function() {
$("#topheaderid").animate({ top: '-=60px' }, 500);
},function() {
$("#topheaderid").animate({ top: '+=60px' }, 500);
})
});
});
</script>
PROBLEM 1: the above is only moving the topheader down further and further every time I click on it (not going back up 60px again as specified)...
PROBLEM 2: The above is also somehow sliding my account image to the right (out of screen)
And I would like to implement the other rules in this too, so that on a click the topheader just moves down smoothly with 60px, up the top appears the account navigation in a new div (accountbar) AND the content (class content) moves down another 60px. As said before using "slidetoggle" and "toggleclass" works but I much rather have the "animate" function do the job as this looks awesome.
I have implemented these rules from the first script but it does not happen "smoothly" obviously and the topheader just keeps on going down...
I hope this is enough info and someone can help :)
When this works I want to extend this with a search button as well that appears below the topheader on click.
https://jsfiddle.net/d14tcb9n
Thanks.

You can trigger the animations like:
jQuery(document).ready(function($){
$("#account").on('click',function(){
if($(this).hasClass('open')) {
$("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
$("#accountbar").animate({ height: '0' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false });
$(this).removeClass('open');
} else {
$("#topheaderid").animate({ top: '60px' }, { duration: 500, queue: false });
$("#accountbar").animate({ height: '60px' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false });
$(this).addClass('open');
}
});
});
remove the display none from the hidden div and change the height to 0
demo:https://jsfiddle.net/o1cvho6m/

Animate object on page load, but still be able to change with hover

Let's say I have a little hover function on three boxes. When I hover over one, it animates and changes the background color. When the page loads, I want one to already be animated. If I hover on another box, it will disappear and then just animate whichever is hovered on.
Here is the JSFiddle
jQuery:
$(document).ready(function(){
$('.box').hover(function(){
$(this).stop().animate({
backgroundColor: "red"
}, 800);
},
function(){
$(this).stop().animate({
backgroundColor: "green"
}, 800);
});
});
Now how can animate the middle box when the page loads. Then allow the hover to work as normal (which includes the middle box animating back to normal).

You may try this
$(document).ready(function(){
$('.box').eq(1).animate({
backgroundColor: "red"
}, 800);
$('.box').hover(function(){
$('.box').stop().animate({
backgroundColor: "green"
}, 800);
$(this).stop().animate({
backgroundColor: "red"
}, 800);
},
function(){
$(this).stop().animate({
backgroundColor: "green"
}, 800);
});
});
DEMO.

Use a custom class:
$(document).ready(function(){
$('.box').hover(
function(){
$(this).stop().animate({
backgroundColor: "red"
}, 800,function(){
$('.box').removeClass('.animated');
})
},
function(){
$(this).stop().animate({
backgroundColor: "green"
}, 800);
});
})
The CSS:
.animated { background:red;}
You could experiment with where you want to put the removeClass. It may be better to add a function like the following:
$('.box').one('mouseover',function(e){
$('.box').removeClass('.animated');
})
I actually like that better, because it only fires once, but the difference is probably negligible. You could also take the function off the end of the first animate, and stick the line before the animate function is called. My guess is the way I suggested would be the smoothest looking. But, all ways will work.

JavaScript taking extra time between calls

console.log("FADIG");
console.log(modal);
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
console.log("background GONE!");
modal.animate({
"opacity": 0
}, 300, function () {
console.log("FADED OUT MODAL");
modal.css({
'opacity': 1,
'visibility': 'hidden',
'top': topMeasure
});
unlockModal();
});
That's my JavaScript code. I know that it finds the object named modal just fine. It then immediately spits out background GONE! then it takes about 10 seconds for me to see FADED OUT MODAL. Which means the animate didn't run for a good 10 seconds.
Any idea why this would be?

Super simple... I think a few animations were being queued, so I changed it to:
modal.stop().animate and all is well

jQuery Animate() hover?

I'm using jQuery for the first time, specifically on my own website, and I'm using the animate function to make an email tab move down slightly when hovered upon (check it out in the top right: http://www.tommaxwell.me). However, I don't know how to make the animation pause after completing. I can make the first animation and the animation necessary to have it return to its original state, but I want it to return to its original state after the user moves their cursor away. Here's the code, and keep in mind I realize why it doesn't work, I just don't know a solution as I'm new to jQuery.
$("#emailme").hover(function(){
$("#emailme").animate({
paddingTop: "15px"
}, 100, function() {
$("#emailme").animate({
paddingTop: "10px"
}, 100)
});
});

The second argument to hover is the callback to invoke when the user moves their mouse away.
$("#emailme").hover(function() {
$(this).animate({
paddingTop: "15px"
}, 100);
}, function() {
$(this).animate({
paddingTop: "10px"
}, 100)
});
So the general idea is:
$('selector').hover(function(){
//stuff to do on mouse in
}, function(){
//stuff to do on mouse out
});

You should use the functions $element.mouseover(fn) and $element.mouseout(fn).
So it should be like this:
$("#emailme").mouseover(function(){
$(this).animate({
paddingTop: "15px"
}, 100);
}).mouseout(function(){
$(this).animate({
paddingTop: "10px"
}, 100);
});
This means that attach event handlers to two different events: when you move your mouse over the element it expands and when you move your mouse out it subtracts - just as you want it.