how can you scroll with scripty2??
document.body.scrollTo(300, {
transition: 'easeInOutQuad',
duration: 0.5
});
have also tried with window.scrollTo()
EDIT:
this doesnt work either
$(document.body).scrollTo(300, {
transition: 'easeInOutQuad',
duration: 0.5
});
but in some other code this works fine
this.loader.morph('opacity:1; filter:aplha(opacity=100)', {
transition: 'easeInOutQuad',
duration: 0.5
});
document.body is not automatically a scripty element. You need to either turn it into one, IIRC like so:
$(document.body).scrollTo(.......);
or use Element.scrollTo:
Element.scrollTo(document.body, .....);
Related
I wanted to use animate to translate and fade element but the opacity property doesn't affect the animation.
I've got so far :
let timeline1 = anime.timeline();
timeline1.add({
targets: '#operation .letter',
translateY: [0,40],
opacity: [0, 1],
easing: "linear",
duration: 300,
delay: (el, i) => 30 * i
})
Translation and other properties work nicely but it seems that it doesn't change the opacity as a css property but as an attribute.
In the HTML, once rendered, the targets shows:
<span class="letter" opacity="1" style="transform: translateY(40px);">p</span>
It seems to get opacity as an attribute not like a css property
I tried to opacity: 1, and opacity:"1" both didn't change the animation
Thanks in advance,
I set the "opacity" property to 0 in the .css and configured the script like this:
var timeline = anime.timeline();
timeline.add({
targets: '#home-intro',
opacity: 1,
duration: 4000,
}
);
Everything works fine, with and without timeline.
Currently im trying to set a page so that on click of a button one div .animates up and another .animates down in the place the old div was which has been successful. The problem is they both do this at the same time making the animation a bit messy. What I want to do is have the animation pause for about 2 seconds just after the first div has moved up and then bring down the second div. Here is my code so far:
$(document).ready(function() {
$('.aboutcontainer,.contactcontainer,.homecontainer,.portfoliocontainer,.musiccontainer').hide();
});
$(document).ready(function() {
$(".homecontainer").show();
});
$(document).ready(function() {
$('#about').click(function go() {
$('.homecontainer,.musiccontainer, .portfoliocontainer, .contactcontainer').fadeOut({
queue: false,
duration: 'slow'
});
$('.homecontainer, .musiccontainer, .portfoliocontainer, .contactcontainer').animate({
'margin-Top': "-1000px" //moves left
});
$('.aboutcontainer ').fadeIn({
queue: false,
duration: 'slow'
});
$('.aboutcontainer').animate({
'margin-Top': "115px" //moves left
});
});
});
I have tried inserting a .delay(2000)just before the .fadeIn here:
$('.aboutcontainer ').fadeIn
and another one before the .animate here:
$('.aboutcontainer').animate
.delay does not seem to work at all (im using the lates jQuery version)
The weird thing is I have tried using a setTimeout() function like so:
setTimeout(function() {
$('.aboutcontainer ').fadeIn({
queue: false,
duration: 'slow'
});
$('.aboutcontainer').animate({
'margin-Top': '115px' //moves left
});
}, 2000);
When I do the .fadeIn pauses for the 2 seconds but the .animate does not. Can someone please let me know what im doing wrong here?
At your site .aboutcontainer has margin-top: 115px; at main.css:131.
So animation from margin-top: 115px; to margin-top: 115px; actually does nothing.
You can set, for example, margin-top: -1000px for .aboutcontainer and see the animation in action.
You are missing the time paramater for animation,
Try to add the timing for animation like below.
setTimeout(function() {
$('.aboutcontainer ').fadeIn({
queue: false,
duration: 'slow'
});
$(".aboutcontainer").animate({
marginTop: "115px",
}, 750);//Look at here..
}, 2000 );
here is the jsfiddle, check it http://jsfiddle.net/ganeshgaxy/d6g1empb/
I am learning how to schedule animations via JavaScript, especially with the help of jQuery. I tried to blink some h1 tags, but the animation doesn't seem to run fluently. It stops for a while and then go on.
The core animation code:
function animSlideHeading() {
$('.slide h1').animate({
opacity: .6
}, 500, 'swing', function() {
$('.slide h1').animate({
opacity: 1
}, 500, 'swing', animSlideHeading);
});
}
See this JSBin.
There are several elements matching the selector $('.slide h1'), so the callback is called multiple times, once for each element that is animated, and animSlideHeading runs more and more times the longer it goes, messing it up.
To solve it, you can use promises that resolve when the animations have completed for all the elements in the collection collectively
function animSlideHeading() {
$('.slide h1').animate({
opacity: 0.6
}, 500, 'swing').promise().done(function () {
$(this).animate({
opacity: 1
}, 500, 'swing').promise().done(animSlideHeading);
});
}
animSlideHeading();
FIDDLE
I'm trying to expand my searchbar using jQuery.
Also I want to hide the nav links.
I have some jQuery code like this. This code works fine when focus.
$(".searchBox input").focus(function(){
$("#navlinks").css('display','none');
$(this).css({'width':'200px','-moz-transition':'width 0.5s ease-out','-webkit-transition':'width 0.5s ease-out','transition':'width 0.5s ease-out'});
});
$(".searchBox input").focus(function(){
$(this).css({'width':'100px','-moz-transition':'width 0.5s ease-out','-webkit-transition':'width 0.5s ease-out','transition':'width 0.5s ease-out'});
$("#navlinks").css('display','block');
});
The second function also works fine except it display the content before animation complete.
So I want $("#navlinks").css('display','block'); to be exectuted only when animate complete.
Can anyone tell me how?
Thanks
.css() doesn't have a callback function, but .animate() does. Just set the time to 0 and use animate.
$(".searchBox input").on('focus',function(){
$(this).animate({width:100,mozTransition:'width 500ms ease-out',webkitTransition:'width 500ms ease-out',transition:'width 500ms ease-out'},0,function(){
$("#navlinks")
.delay(500)
.css({display:'block'});
});
});
Edit: included delay, which is required. (Thanks eicto)
Since you know how long takes your animations, why do not use setTimeout() after CSS change?
As far as I see your animation takes about 0.5 seconds. You could easily execute your "callback" seamlessly at end of your animation specifying the same amount of time in milliseconds.
$(".searchBox input").focus(function(){
$(this).css({'width':'100px','-moz-transition':'width 0.5s ease-out','-webkit-transition':'width 0.5s ease-out','transition':'width 0.5s ease-out'});
setTimeout( function() {
$("#navlinks").css('display','block');
}, 500);
});
I would recommend using .animate() like
$(".searchBox input").focus(function(){
$(this).animate({
'width': '100px'
}, 500, function() {
$("#navlinks").css('display', 'block');
});
});
This will work on all browsers, and the navlinks command will be insured to begin after the animation is complete. Note: the 500 is the number of milliseconds the animation will take to complete, so you can adjust accordingly.
Here is the .animate() documentation:
http://api.jquery.com/animate/
I came along here, but I used another solution:
$('.something').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
function(event) {
// Do something when the transition ends
});
As you see, this is doing something, when the transition has ended.
This is described here:
http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end
Greetings,
Lars
Here is described
transitionend event, let's try that:
CSS:
#test {
width: 100px;
border: 1px solid black;
-webkit-transition: all 1s;
-moz-transition all 1s;
transition all 1s;
}
#test.wide {
width: 200px;
}
JS:
var test = $('#test');
test.bind('transitionend webkitTransitionEnd oTransitionEnd', function () {
$('body').append('<div>END!</div>');
})
$('button').click(function () {
test.toggleClass('wide');
});
DEMO
i have a coke like below that using jquery prototype Library:
new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })
this code force the imageDataContainer element to sliding Down From 0 Opacity To 1 Opacity.
how can i implement upper codes with new downloaded jquery library from jquery.com web site?
the syntax of slideDown is like this :
http://www.w3schools.com/jquery/eff_slidedown.asp
i know how slideDown And fadeTo Functions Work in jquery / but how can i combine them like the upper codes?
i test the below code - but u can not changing the opacity --DURING-- toggle :
$('#lightbox-container-image-data-box').animate({
opacity: 0,
height: 'toggle',
opacity: 1
}, 400, function() {
// Animation complete.
});
thanks 4 attention
Use animate() for that. With animate you can animate any arbitrary number of properties on an element.
Check a demo of the code below here: http://jsfiddle.net/chrisramakers/8ewEp/
$('#book').hide();
$('#book').animate({
opacity: 'toggle',
height: 'toggle'
});