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
Related
How are you?
This is from a previous post and a solution was posted.
JS :
$(document).ready(function() {
var allBoxes = $("div.boxes").children("div");
transitionBox(null, allBoxes.first());
});
function transitionBox(from, to) {
function next() {
var nextTo;
if (to.is(":last-child")) {
nextTo = to.closest(".boxes").children("div").first();
} else {
nextTo = to.next();
}
to.fadeIn(500, function() {
setTimeout(function() {
transitionBox(to, nextTo);
}, 5000);
});
}
if (from) {
from.fadeOut(500, next);
} else {
next();
}
}
JSFIDDLE HERE
However I was trying to extend this a bit, where when box 1 fades out, you can see box 2 fading in slightly at the same time - simultaneously, and as box2 fades out ...box 3 is fading in at the same time with the opacity going from 0 to 1
I'm fine and you? :') .
I have a solution that maybe can help.
Have you tried making 1 class named display and setting display: block; and then put it on the function as toggleClass(). Finally you make a new class named as .transition(I do this with all my project to make them easier) and put it on the div or add it with some code like: $("div").addClass("transition");.
the code for .transition should be like this:
.transition {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
You can also try insted of CSS and jQuery using only CSS.
an example could be using CSS Animations. Define the class of every box and then make a animation and add a delay on every animation so it will show every certain time, make them infinite so the will loop.
Hope you understand :)
Editing line 14 of your jsFiddle to add a delay created a smoother effect so you don't see two at once. Which I surmise is the answer to the question.
Line 14 edits: to.delay(100).fadeIn(500, function () {
I am new to textilate.js (http://jschr.github.io/textillate/) does anyone know how to increase the spped of animation on textilate.js Please help me out....
Use the delayScale option.
So it would look something like this:
jQuery(function () {
jQuery('ElementName').textillate({ in : {
effect: 'rollIn',
delayScale: .5,
},
out: {
effect: 'hinge'
},
loop: false
});
});
Textillate.js uses animate.css so if your effect happens to be fadeInUp, find the class .fadeInUp inside animate.css and add the following:
-webkit-animation-duration: 1s;
animation-duration: 1s;
You can tweak the duration from 1s to say 0.5s to make it even faster.
When my webpage is first loaded, my starting div rotates using this CSS code:
#keyframes rotate
{
from { transform:rotate(0deg);
-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg); }
to { transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg); }
}
#-webkit-keyframes rotate
{
from { transform:rotate(0deg);
-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg); }
to { transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg); }
}
After the rotation, this code is useless.
I would like it so when a button is clicked, it will make this rotation again.
To do this I need to be able to put this css code into a javascript/jQuery function so I can call it at any time.
Is this possible?
TRY THIS
$({deg: 0}).animate({deg: d}, {
duration: 2000,
step: function(now){
elem.css({
transform: "rotate(" + now + "deg)"
});
}
});
Look at JSFIDDLE DEMO
You can wrap your animation behavior into a class like:
.rotate{
-webkit-animation: rotate 4s;
/* more prefixes if you want to */
animation: rotate 4s;
}
Then you can apply that class on click of your button like:
$('#myButton').click(function(){
$('#myElementToAnimate').addClass('rotate');
});
To remove the class once your animation has finished you have to listen for the animationend event like:
$('#myButton').click(function(){
// all the different event names are due to the fact that this isn't fully standardized yet
$('#myElementToAnimate').addClass('rotate').on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function(){
$(this).removeClass('rotate');
});
});
This should give you smoother results than using JavaScript based animation. See this demo fiddle
by simply applying the CSS properties and the desired values to jQuery
DEMO
$(' #box ').css({
transition: '2s linear',
transform: 'rotate(360deg)'
});
P.S: jQuery will handle all those -browser-specific prefixes for you.
I know I can change the color of a text using this
$(#text).css('color', 'red');
How should my javscript be such that I can make it flash to red and black with an interval of about 200ms in between?
It'll be good if I can do something like this
function loop() {
setTimeout(function () {
ChangeTextToRed();
<pause for 300ms here>
ChangeTextToBlack();
loop();
}, 300);
}
But I know there's no thread.sleep in javascript
Using setInterval and jquery's toggleClass() method, you can accomplish this very easily.
setInterval(function() {
$('#text').toggleClass("blink");
}, 300);
You simply add/remove a class that has the other color. View a working sample on jsfiddle: http://jsfiddle.net/UFfRc/
EDIT:
Just wanted to give a little more info. The benefit to this approach (using a class) is that you can customize it without editing the javascript. You can add transitions, movements, etc. Also, this will degrade gracefully on browsers that dont support css3 transitions. They will simply see the state change without a transition. Here's an example of that. http://jsfiddle.net/rRXGc/
With that said, be responsible. :)
You could try using the setInterval method:
setTimeout(function () {
// do something here
}, 300);
This allows you to execute some code at regular intervals (300ms in this example)
Just use setInterval and toggle between two classes.
setInterval(function() {
var newClass = '.'+ $('#text').hasClass('black') ? 'red' : 'black';
$('#text').attr('class', newClass);
}, 300);
You already have used setTimeout, you will have to do it twice:
function loop() {
setTimeout(function () { // pause for 300ms before executing this:
ChangeTextToRed();
setTimeout(function () { // pause for 300ms before executing this:
ChangeTextToBlack();
loop();
}, 300);
}, 300);
}
or shorter:
function loop() {
ChangeTextToRed();
setTimeout(function () {
ChangeTextToBlack();
setTimeout(loop, 300);
}, 300);
}
Of course, you could as well use setInterval and maintain a boolean flag on which change to make, but the above is simple enough.
I know that is not a large support CSS feature but you could use animation
#text{
animation:blackred 400ms linear infinite; -webkit-animation:blackred 400ms linear infinite; -moz-animation:blackred 400ms linear infinite; -o-animation:blackred 400ms linear infinite;
}
#keyframes blackred{
0%{color:red;}
50%{color:black;}
100%{color:red;}
}
#-webkit-keyframes blackred{
0%{color:red;}
50%{color:black;}
100%{color:red;}
}
#-moz-keyframes blackred{
0%{color:red;}
50%{color:black;}
100%{color:red;}
}
#-o-keyframes blackred{
0%{color:red;}
50%{color:black;}
100%{color:red;}
}
Here's my current code, http://jsfiddle.net/AW5BK/2/
$(".feedback").hover(function(){
$(this).animate({marginLeft : "25px"},500);
},function(){
$(this).animate({marginLeft : "-25px"},500);
});
It works well, but whenever mousing over and out of the object quickly, it slides open and closes repeatedly. Is there a way to stop that from happening? Thank you
Use stop() for preventing repetitive animation conflict:
$(".feedback").hover(function(){
$(this).stop().animate({marginLeft : "25px"},500);
},function(){
$(this).stop().animate({marginLeft : "-25px"},500);
});
Here is working jsFiddle.
Better use native method:
$(".feedback").hover(function(e){
e.stopPropagation();
$(this).animate({marginLeft : "25px"},500);
},function(){
e.stopPropagation(e);
$(this).animate({marginLeft : "-25px"},500);
});
Or even better – CSS Transitions:
.feedback {
transition: all 600ms ease-in-out;
}
.feedback:hover {
transform: translate3d(-25px, 0, 0);
}
Both properties requires prefixes: -webkit-, -moz-, -o- and one without