i'm trying to animate with jQuery.
http://jsfiddle.net/g8mQu/
$('#down').on("click", function() {
$('#inner').animate({ "top": "-=50px" }, "slow" );
});
That's my code pretty much and it works in this demo, but i'm trying to implement this into a Bootstrap framework site. The css is the same though, the wrapper is a container and the scrollable div is a col-xs div.
This should work fine but whenever I click a button it doesn't add 50 to the position but sets the position to 50 / -50 even though i'm using the "+=50" command.
try with
$('#down').on("click", function() {
var $inner = $('#inner');
$inner.animate({ "top": $inner.css("top") - 50 }, "slow" );
});
Related
This is basically my current website:
https://jsfiddle.net/s0wgnvk2/
And now I have the problem in the #About section when I click right it goes to #right section and, you can't see it in fiddle but in my webpage the transition is really smooth and I like it how it is, but I just don't know how to make it work for the left side since it is positioned left:-100%.
$(function() {
$('#About a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
I know about the fullPage.js plugin but I'd like to have my own solution and web layout even thought fullPage is probably a lot better.
I would appreciate if you could help me out
EDIT
Fiddle corrected: https://jsfiddle.net/s0wgnvk2/1/
scrollLeft denotes the scroll bar position from the left, see ref here. So it cannot be negative (the left most position is 0).
What you need might be marginLeft, try:
$('html, body').animate({ marginLeft: '100%' });
Here is a working jsfiddle example. Note that I have make the header position: fix, so that it knows where to anchor and how to width itself when the left margin of the element changes.
Use animation not scroll
see what issue you face when you use scroll https://jsfiddle.net/kevalbhatt18/s0wgnvk2/4/
And as you said in your site animation is working smoothly and not in fiddle
that is because you haven't selected jauery from droupdown which is
present in left side of fiddle editor so your animation is not working so if you see your console it will give you Uncaught ReferenceError: $ is not defined in your example https://jsfiddle.net/s0wgnvk2/
Left right animation Example: https://jsfiddle.net/kevalbhatt18/vunL9ec2/
$('#About a').bind('click', function (event) {
var $anchor = $(this);
if ($anchor.context.innerHTML === "RIGHT" ) {
$($anchor.attr('href')).stop().animate({
left: '-=100%'
}, 1000);
} else if ($anchor.context.innerHTML === "LEFT") {
$($anchor.attr('href')).stop().animate({
left: '+=100%'
}, 1000);
} else {
console.log($(this).context.offsetParent.id )
$('#'+$(this).context.offsetParent.id ).stop().animate({
left: $(this).context.offsetParent.id ==='right'?'+=100%':'-=100%'
}, 1000);
}
I am having some issues with some code. I am trying to get a div to move in time with a slider show. Each time a new slide is shown the div moves.
This is what I came up with
setInterval(function() {
$( ".bar" ).animate({ "left": "+=13.5em" }, "slow" );
}, 3000);
This works great, the div keeps up with the slider. But It never stops. I have been trying to come up with the code to make this work but I can't seem to do it.
Once the div reaches a certain point I want it to go back to its starting point and then repet its animation over and over just as the image slider does.
Could I put another timer on another line of code to tell the div to go back to a point after a set duration? then the above code will keep playing the aniamtion? (I will give this ago now!)
Are you using a plugin for the slider? Some plugins you can set a callback like flexslider plugin:
$(elem).flexslider({
before: function(){
//event before slide transition
},
after: function(){
//event after slide transition
}
});
var count = $(".bar").length;
var current = 1;
setInterval(function() {
$( ".bar" ).animate({ "left": "+=13.5em" }, "slow" );
current++;
if(current == count) {
$( ".bar" ).animate({ "right": "+=" + (count*13.5) "em" }, "fast" );
current = 1;
}
}, 3000);
Maybe something like that?
var startPos = $(".bar").offset();
var endPos = $("foo").offset();
var foo = setInterval(function() {
var updatedPos = $( ".bar" ).position();
if (updatedPos.left === endPos.left) {
$(".bar").css({"left":startPos.left,"top":startPos.top});
}
$( ".bar" ).animate({ "left": "+=13.5em" }, "slow" );
}, 3000);
EDIT:
var pos = $(".bar").offset(); this gets the position relative to the document, you could also get the position relative to the parent node with .position() and then check on the interval if it hit the position, you could also just update the left right or top bottom, depending on your needs. but this would be a way to reset the position. You just need to know the start and end points.
I have a jQuery Mobile page and I want to animate the Save button on this page to lose half of its width/height and then to animate back to its original size.
function animateMe() {
var originalHeight = $("#btnSave").height();
var originalWidth = $("#btnSave").width();
$("#btnSave").animate(
{"height": originalHeight / 2, "width": originalWidth / 2},
{ duration: "fast" }
);
$("#btnSave").animate(
{"height": originalHeight, "width": originalWidth},
{ duration: "fast" }
);
}
The animation works fine, but I was hoping for the button to collapse its middle, instead it collapses to its top/left location (as one would expect).
How can I animate the button to collapse to its middle and then back?
This would be much better using CSS3 animation and the scale transform, instead of relying on jQuery's animate. Beside other advantages with using CSS3 animations for this, the performance should be much better.
Here's a rough example, just to give you an idea:
http://jsfiddle.net/ghinda/8nNeS/
You would have to add to the animation a position change, or padding change, that offsets the element's image as well.
$("#btnSave").animate({
"height": originalHeight / 2 + "px",
"width": originalWidth / 2 + "px",
"padding-left": (originalWidth / 2) + "px",
"padding-top": (originalHeight / 2) + "px",
}, {
duration: "fast"
});
Something similar to that, anyway.
How can I animate this using jQuery? I'm trying to create a smooth scroll-to function when the user clicks the span p1c1. The slimScroll is working, but I'm not sure how to incorporate an animation function into this. Should I try tweening?
$('.p1c1').on("click", function(){
var fromTop = $('.p2c1').position().top;
$("#panel2").slimScroll({ scrollTo: fromTop });
});
This is the type of animation I'm trying to do, but within my slimScroll panel:
$('html, body').animate({
scrollTop: $(".middle").offset().top
}, 2000);
Here is the slimScroll library: https://github.com/rochal/jQuery-slimScroll/
I was looking for the same thing but couldn't find an existing solution - so I've made a simple fork of rochal's code. You can find it here: https://github.com/edragame/jQuery-slimScroll
The only change I made was to add an animate option, like so:
$("#panel2").slimScroll({ scrollTo: fromTop, animate: true });
Let me know if that helps.
"Animate: true" does not work.
You have to cut out the "if (isJump)" part in jquery.slimscroll.js and replace it with this:
if (isJump)
{
delta = y;
var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
offsetTop = Math.min(Math.max(offsetTop, 0), maxTop);
bar.css({ top: offsetTop + 'px' });
me.animate(
{ scrollTop: delta + 'px' },
1200
);
}
if (!isJump){
me.scrollTop(delta);
}
I used scroll-behavior: smooth; and worked fine for me.
Any ideas on how to animate the width and height of a div from the top center?
Tried using effect('scale') but this is based on a show/hide so snaps back after completion.
Then tried a normal animate:
$('.box').animate({'width':200px,'height':200px,margin-left:-100px});
This works, but as there is a line of .box, I want the others to react and push to one side.
Fine Tuned
FIDDLE
$('.day').hover(function() {
if($(this).index()==0){
$(this).animate({'width':400,'height':400}, 500);
}else{
$(this).animate({'width':400,'height':400}, 500);
$(this).parent().stop().animate({'margin-left':'-100'} , 500);
}
}, function() {
$(this).animate({'width':200,'height':200}, 500);
$(this).parent().stop().animate({'margin-left':'0'}, 500);
});
Maybe like this:
$('.day').hover(function() {
$(this).animate({'width':400,'height':400, 'margin':'-100px -90px'});
}, function() {
$(this).animate({'width':200,'height':200, 'margin': '0 10px'});
});
Fiddle: http://jsfiddle.net/dmYY3/3/ ?