I'm making a web based presentation using the full width and height carousel of bootstrap for a client. It is a simple tutorial of how to create an account in the client's website and it consist on images only. However, I managed to put an image of a pointer that animates with jQuery and highlight the place where the user has to click. So far the animation works perfect but I need it to start when the user gets to see that slide, so I was wondering if it's possible to start the animation when you see that pointer then it starts moving.
This is my script:
$('.carousel').carousel({
pause: true,
interval: false
})
</script>
<script>
(function animation() {
var options = {
duration: 800,
easing: 'linear'
};
$('.fill')
.find('.pointer_fing')
.animate({
left: 36,
top: 880
},
options
)
.animate({
left: 866,
top:694
},
options
)
.animate({
left: 936,
top: 350,
},
options
)
.animate({
left: 936,
top: 280,
},
$.extend(true, {}, options, {
complete: function() {
animation();
}
})
);
})();
Related
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' });
});
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/
I'm currently trying to develop a list of projects, which on mouseenter/leave triggers a function. Currently on mouse enter the background block slides out of view to the right and on mouse leave the background block slides back into view. This works as expected, but when I enter and leave multiple times, the animations trigger and jerk around - loosing the smooth scroll effect that I'm trying to achieve. How would I go around preventing the jerkiness, I've tried adding a 'disable' class, but this doesn't seem to work. Any and all advice would be helpful.
jQuery V1:
project.mouseenter(function() {
var project = $(this).hasClass('disable');
if(!project){
var colourDuration = 750, colourDelay = 550;
$(this).find('.colour-block').stop(true,false).velocity({left:'100%'},{duration: colourDuration, delay: colourDelay, complete: function() {
$(this).addClass('disable');
}});
$(this).find('p').stop(true,false).velocity({height:'26px'},{duration: 500, delay: 225});
$(this).find('button').stop(true,false).velocity({height:'26px'},{duration: 500, delay: 225});
}
});
project.mouseleave(function() {
var project = $(this).hasClass('disable');
if(!project){
var colourDuration = 750, colourDelay = 550;
$(this).find('.colour-block').stop(true,false).velocity({left:0},{duration: colourDuration, delay: colourDelay, complete: function() {
$(this).removeClass('disable');
}});
$(this).find('p').stop(true,false).velocity({height:0},{duration: 500, delay: 225});
$(this).find('button').stop(true,false).velocity({height:0},{duration: 500, delay: 225});
}
});
jQuery V2:
project.hover(function() {
var colourDuration = 750, colourDelay = 550;
$(this).find('.colour-block').velocity({left:'100%'},{duration: colourDuration, delay: colourDelay});
$(this).find('p').velocity({height:'26px'},{duration: 500, delay: 225});
$(this).find('button').velocity({height:'26px'},{duration: 500, delay: 225});
}, function() {
$(this).find('.colour-block').velocity('stop').velocity('reverse');
$(this).find('p').velocity('stop').velocity('reverse');
$(this).find('button').velocity('stop').velocity('reverse');
});
Velocity JS
http://velocityjs.org/
Screenshot:
I have a Problem concerning scrolling in jQuery mobile.
I am trying to get a vertical navigation bar on the left side which can be expanded or collapsed via a button in the header of my Page. So I have tho containers named like the following:
#navbar | #header (with Button #showNavBar)
| #content
|
| #footer
At first the #navbar is behind behind my content area (with header and footer).
By clicking the Button #showNavBar I am doing the following:
header.animate({
left: "200px"
}, { duration: 300, queue: false });
content.animate({
left: "200px"
}, { duration: 300, queue: false });
So the users can see the navbar on the left side. To this point everything works well.
But trouble starts. Now it is possible to scroll to the right side to see the full content area.
But it isn't possible to scroll the header...
Does anybody have a hint for me how to avoid the x-scrolling after the animation? I already tried "overflow-x: hidden !important;" to the content container and the body but that doesn't work.
try
$(document).delegate('.ui-content', 'touchmove', false);
Ok, after rethinking the whole problem I just shrinked the width of my body, so it is not necessary to scroll the content area.
Here is how I do it right now. The body gets a new width in the animation.
var viewport = {
width : $(window).width(),
height : $(window).height()
};
function openme() {
$(function () {
topbar.animate({
left: "200px"
}, { duration: 300, queue: false });
pagebody.animate({
left: "200px", width: (parseInt(viewport['width']) - 200) + "px",
}, { duration: 300, queue: false });
console.log("open me" + (parseInt(viewport['width']) - 200) + "px");
});
}
function closeme() {
var closeme = $(function() {
topbar.animate({
left: "0px"
}, { duration: 180, queue: false });
pagebody.animate({
left: "0px", width: "100%",
}, { duration: 180, queue: false });
console.log("close me");
});
}
Hope this helps anybody.
Thanks to Rachel for beeing so patient and giving me a help!
I have created a drop-down-menu, the html for the drop-down part basically looks like this:
<div class="menu-item">
<!-- Menu title -->
<div class="drop-down">
<!-- Content -->
</div>
</div>
I want to animate this using jQuery-Code (with the easing-plugin), but the following Code does not work:
$(".menu-item").mouseenter(activate);
$(".menu-item").mouseleave(deactivate);
function deactivate()
{
var dropdown = $(this).find("div.drop-down");
dropdown.stop().animate(
{height: '0px'},
{queue: false,
duration: 600,
easing: 'easeOut'
}
);
}
function activate()
{
var dropdown = $(this).find("div.drop-down");
dropdown.stop().animate(
{height: 'auto'},
{queue: false,
duration: 600,
easing: 'easeOut'
}
);
}
The message in the error console is: "Warning: Error in parsing value for 'height'. Declaration dropped."
If I use "height: '100px'" or somthing similar in the activate-Function it works as expected. But for maintainability reasons i want the height to be calculated autmatically, so the drop-down adapts its size to its content.
How can this be achieved?
Greetings,
Jost
I would try to use slideUp() and slideDown() for this animation. Note that those functions accept easing functions.
Other option, if for some reason you need to use animate for this, you might want to do something like this in your activate function:
function activate(){
var dropdown = $(this).find("div.drop-down");
dropdown.css('height','auto')
.hide()
.stop()
.animate(
{height: 'auto'},
{queue: false,
duration: 600,
easing: 'easeOut'
});
}
One solution could be store the height value in the deactivate method and use it when activating. I do not think that jQuery supports animating a dimension property to a string value.
var menu_handler = (function(){
var orig_height = 0;
return {
deactivate : function deactivate () {
var dropdown = $(this).find("div.drop-down");
orig_height = dropdown.height();
dropdown.stop().animate(
{height: '0px'},
{queue: false,
duration: 600,
easing: 'easeOut'
}
);
},
activate : function activate () {
var dropdown = $(this).find("div.drop-down");
dropdown.stop().animate(
{height: orig_height},
{queue: false,
duration: 600,
easing: 'easeOut'
}
);
}
};
}
$(".menu-item").mouseenter(menu_handler.activate));
$(".menu-item").mouseleave(menu_handler.deactivate));