Animate div using jQuery and changing the Width - javascript

I'm trying to slide in a div into the page while the page is loaded completely, I used CSS before, but it wasn't smooth at all, so i switched to use jQuery.
It's very smooth but i have a small issue which i believe somebody with more experience could solve it very quickly.
If you look at my output, the effect is not very seamless and it seems it stuck at some point.
Because i'm animating the div within change the width, i'm sure there is a better way to do that.
Here is my code :
$(document).ready(function() {
$("#thumbnails").animate({
opacity: 1,
width: "800px",
}, {
duration: 500,
specialEasing: {
width: "linear"
}
});
});
Here is the Output link
http://jsbin.com/cuvaxuji/1

Are you trying to slide the div ... for sliding make "#thumbnails" position absolute and write
$("#thumbnails").animate({
opacity: 1,
left: "20px",
}

Related

JQuery unable to animate div after "forwards" css animation

See example
http://jsfiddle.net/nxsv5dgw/
Div appears on stage, a "forwards" animation occurs on it, JQuery can apparently no longer "animate" the properties that were animated.
In the example, a css animation plays on the width of a box. OnClick, a JQuery animation tries to shrink the width and height of the box, but only the height is changed. Here's the code.
$(".a").click(function(e) {
$(this).animate({
width: "-=100px", // doesn't work after CSS animation
height: "-=100px",
}, 400);
})
.a {
background:red;
position:absolute;
height:500px;
width:600px;
animation: anim 0.4s forwards 1s;
}
#keyframes anim {
0% {width:600px;}
100% {width:500px;}
}
Is there any way to circumvent this? I'd rather avoid doing all animations in JQuery if possible.
Only tested for Firefox, but working - I've adjusted your Fiddle adding
$(this).css({
"width": $(this).width(),
"animation": "none"
});
to the click-function. This sets the width to the actual width and overrides the animation, but I think there could be a better solution as it looks like a hack.
Update - also working for Safari and IE.
Actually you can set the width to 500px after the animation is complete so that DOM element knows that DIV has width 500px and remove the css animation from Element.
$(".a").on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () {
$(this).width(500);
$(this).css({
"animation": "none"
});
$(".a").click(function (e) {
$(this).animate({
width: "-=100px",
height: "-=100px",
}, 400);
});
});
Basic Idea: To avoid conflicting between CSS animation and jQuery animation one should call the jQuery animation only when CSS animation is completed by using animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd event and by undoing the rules overriden by CSS animation and removing animation from the element.
Working Fiddle
As you said, this happens by using forward in animation.
From the CSS Animations Working Draft
CSS Animations affect computed property values. During the execution of an animation, the computed value for a property is controlled by the animation. This overrides the value specified in the normal styling system. Animations override all normal rules, but are overriden by !important rules.
and Animation Duration
[…] and an animation that fills forwards will retain the value specified at the 100% keyframe, even if the animation was instantaneous. Also, animation events are still fired.
So, it cannot be overriden by default, except for !important rules. But this cannot be done using jQuery.animate()
I'd rather avoid doing all animations in JQuery if possible.
I guess that you can't.
You could use a jQuery solution:
$(document).ready(function() {
$('.a').delay(1000).animate({
width: "-=100px"
}, 400);
});
$(".a").click(function(e) {
$(this).animate({
width: "-=100px", // doesn't work after CSS animation
height: "-=100px",
}, 400);
})
.a {
background:red;
position:absolute;
height:500px;
width:600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a"></div>
I'm not sure if this is an option, as the effect is slightly different then what you are aiming for, but I just wanted to put it out there as an alternative.
The problem is clearly caused by the fact that (http://w3.org/TR/css3-animations/#animations)
Animations override all normal rules, but are overriden by !important
rules
Therefore you could try to animate the scale transform in stead. This way you are not altering the properties that have been set trough the animation. jQuery does not support it out of the box, but this plugin adds the functionality: https://github.com/rstacruz/jquery.transit.
This also has the huge added advantage of being much better for performance then animating your width an height, as very well explained here: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
The drawback of this method is that the contents of your div is scaled down as well, which may not be the desired effect.
I've set up a demo to demonstrate: http://jsfiddle.net/nxsv5dgw/13/
And the code:
$(".a").click(function (e) {
$(this).transition({
scale: '-=0.1'
}, 4000);
});

Using SuperScrollorama to drop image in from top of page

I'm using SuperScrollorama to trigger a lot of animations on a single page (scrolling) website. All of the images and text that slide in from the left or right work perfectly. The problem is when I try to make an image drop in from the top of the screen the image will bounce up and down the whole time the user scrolls until they finally get down to the point where the image is supposed to "sit" (It basically goes back to it's original position and then down to where it's supposed to stay and then back up again and so on)... Here's my relevant code:
HTML:
<div id="about-pin-div">
<div id="pin-frame-pin" class="pin-frame"><img src="img/about-products.png" style="width: 55%;"></div>
</div>
CSS:
#about-pin-div { position: relative; width: 100%; height: 100%; left: -5%; overflow: hidden; }
.pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.pin-frame img { margin-top: -200px; }
JAVASCRIPT:
$(document).ready(function() {
var controller = $.superscrollorama();
controller.addTween('#about-pin-div', TweenMax.from( $('#about-pin-div'), .5, {css:{bottom:'1000px'}, ease:Quad.easeInOut}), 0, 600);
// set duration, in pixels scrolled, for pinned element
var pinDur = 1000;
// create animation timeline for pinned element
var pinAnimations = new TimelineLite();
pinAnimations
.append(TweenMax.from($('#pin-frame-pin img'), .5, {css:{marginTop:80}}))
// pin element, use onPin and onUnpin to adjust the height of the element
controller.pin($('#about-pin-div'), pinDur, {
anim:pinAnimations,
onPin: function() {
$('#about-pin-div').css('height','100%');
},
onUnpin: function() {
$('#about-pin-div').css('height','100%');
}
});
});
Thanks in advance for any help!
I think you are having a number of issues here and I will try to point out some problems that I have had with this plugin.
(1) When in doubt turn off pushFollowers for your pins.
In an effort not to continue to repeat myself
Play through pinned elements in superscrollorama
janpaepke did an excellent job in writing this work around because he had the same issues himself.
(2) Never use margins for adjusting the position, IE handles margins badly sometimes depending on the context won't work the way you want it to.
When to use margin vs padding in CSS
Does a better job at explaining it then I can.
(3) I don't understand the need to trigger on pin functions to adjust the height of #about-pin-div. You are just resetting the starting value over and over that I don't see ever gets changed. Unless you were trying to compensate for the automatically adjusting of pinned elements but the work around in (1) should fix that.

carouFredSel slider - prev,next and pagination not working

I am using the carouFredSel jquery plugin for a website I'm making. I'm having some issues with the "prev", "next" and "pagination" containers. The images show up and start sliding but I cant navigate (prev/next) and I cant see the pagination itself..
You can see the page here: http://goo.gl/pJLNN
The slider is on the top. Caroufredsel is initialized in bbody.js upon DOM ready. Does anyone have any ideas?
In order to correct the images positions you need to add or change the absolute position of every image container.
Since the type of animation you chosen is Crossfade then all the images must be in top of each other to make it work, otherwise by default the are next to each other.
So in the css put this:
#rotate > div {
float: left;
display: block;
width: 100%;
height: 650px;
position: absolute;
left: 0;
}
To correct next and prev you need to make a small fix to the js, this is the correct way of calleing the buttons
prev: {
button : "#msprev"
},
next: {
button : "#msnext"
},
The same happens to pagination, correct it:
pagination: {
container: '#pager'
}
For anyone else facing this issue, another reason for the prev, next & pagination links not working is that the element IDs may have been duplicated somewhere else on your page. I had
prev: {
button : "#prev3"
},
next: {
button : "#next3"
},
There two elements with id="prev3 on the page. Same for id="next3". Once I changed the IDs to make them unique, the navigation started working correctly.

Jquery animate error

it's 3 am right now and I'm not the best at jquery, can someone tell me what stupid mistake I'm making?
I have it in a jsfiddle here: http://jsfiddle.net/JamesKyle/7GWRp/
There's a kink in css transitions that don't allow them to be used on :before or :after elements, so I'm trying to do a workaround using jquery which is already being used on the page. Basically these are the three css state normal, hover, and active.
(I'm trying to animate the little shine at the top)
$(document).ready(function() {
$('.button:before').mouseover(function() {
$(this).animate({
left: '0px',
opacity: 1
}, 100);
});
$('.button:before').click(function() {
$(this).animate({
left: '30px',
opacity: 0
}, 100);
});
$('.button:before').mouseout(function() {
$(this).animate({
left : '-30px',
opacity : '1'
}, 100);
});
});
The verdict here is that, since pseudo elements are not part of the DOM, they cannot be directly targeted with jQuery.
Inserting a physical element like <div class="button gray"><span></span>Button</div> seems to me to be the easiest solution but it does clutter the markup...

jQuery code revealer

I've seen a jquery plugin that was able to "expand" horizontally a <pre> element when you moved your mouse over it.
But I don't remember it's name or where to find it...
Does anyone know?
You can do it without a plugin.
See the following on jsFiddle →
I also like to set overflow-x on the expanded pre so that one can still scroll to see lines that are wider than the expanded size. I don't like scroll bars on the narrower ones, so I set overflow to hidden in the CSS and on mouseleave.
$(function() {
$('pre').mouseenter(function() {
$(this).stop().animate({
width: 400
}, function() {
$(this).css('overflow-x','auto');
});
}).mouseleave(function() {
$(this).stop().animate({
width: 200
}, function() {
$(this).css('overflow','hidden');
});
});
});
Assuming the CSS is as follows:
pre {
width: 200px;
overflow: hidden;
}
Or even better! Use a figure and figcaption element to provide a handy tip for each code listing as seen here.
On top of that, you could use a jQuery plugin like ScrollTo to ensure that the code scrolls back to the left whenever the mouse leaves it.
You don't need a plugin for this. You can do this using the animate() function.
$('div').bind({
mouseover: function() {
$(this).stop().animate({
width: 300
})
},
mouseout: function() {
$(this).stop().animate({
width: 100
})
}
})
Check working example at http://jsfiddle.net/zgTw3/2/
are you looking for this www.sohtanaka.com ?

Categories

Resources