Is there a way to make element fade in or fade out using Raphael.js? My code is something like:
var elem = paper.circle(10, 10, 10)
elem.hide();
Is there an attribute to .hide() to make fade effect, something like:
var elem = paper.circle(10, 10, 10)
elem.hide({'duration':5000});
You can animate opacity for fade effect
var elem = paper.circle(10, 10, 10);
elem.animate({ opacity : 0 }, 1000, function () { this.hide() });
To fadeIn,
elem.show().animate({ opacity : 1 }, 1000);
You can do it without animations also: http://jsfiddle.net/3jsFe/1/
You need to take the elem.node
$(elem.node).fadeOut(2000, function() {
$(elem.node).fadeIn(2000);
});
Related
I'm using the Swiper API to do a cool carousel at beginning of my project, Swiper Sample
In the project I'm working on, I need to do an animation with some images at the same time I drag the swipe, it is working really great with these setting:
var bgAnim = function () {
var opacity = (100 + (swiper.translate / 8)) / 100,
move = swiper.translate / 4,
tDur = $('.swiper-wrapper').css('transition-duration').slice(0, -1) * 1000; // ## problem to run AUTOPLAY
if (move > 0) { move = 0 }
if (move < -200) { move = -200 }
if (opacity > 1) { opacity = 1 }
if (opacity < 0) { opacity = 0; tDur = tDur / 2 }
$('#girl-bg').animate({ // ## problem to run AUTOPLAY
'left': move,
'opacity': opacity
}, tDur);
$('#logo-bg').animate({ // ## problem to run AUTOPLAY
'opacity': opacity
}, tDur);
}
var swiper = new Swiper('.vision', {
//autoplay: 500,
autoplayDisableOnInteraction: false,
slidesPerView: 3,
spaceBetween: 24,
freeMode: true,
slidesOffsetAfter: 1000,
onSetTranslate: bgAnim
});
The problem is, when I use autoplay it conflicts with the two lines I marked above code snippet, if I take the "animate" and $('.swiper-wrapper').css('transition-duration') off it works well, but I need both to animate the background images...
Can someone help me?
I found the solution, I did an AutoPlay with some methods and callbacks as you can see below and it worked perfectly. (:
var swiperAutoplay = function () {
swiper.setWrapperTranslate(swiper.getWrapperTranslate() - 1);
swiper.update(true);
var autoTime = setTimeout(swiperAutoplay, 3);
$(homeSwiper).children().click(function () {
clearTimeout(autoTime);
});
};
setTimeout(swiperAutoplay, 5000);
I have multiple images and want to rotate images in 3d and 2d one by one display.
HTML is like
<div><img src="1.jpg"></div>
<div><img src="2.jpg"></div>
<div><img src="3.jpg"></div>
etc
So I want to display image by previous image flip out and next flip in.
I have tried below code
To hide:
$hide.animate({
transform: 'rotate(180deg)',
opacity: 0.1
},
1500,
'easeInOutBack',
function () {
$(this).hide();
});
To Show:
$show.show().animate({ transform: 'rotate(180deg)', opacity: 1.0 },1500,'easeInOutBack');
But it is not working. I am using jquery and jquery ui only.
you don't animate rotation with jQuery, let CSS do that for you.
try this:
js:
$hide.addClass('hide').removeClass('show');
$show.removeClass('hide').addClass('show');
css:
.show, .hide{transition:all 0.3s ease;}
.hide{opacity:0.1;transform:rotate(0deg);}
.show{opacity:1;transform:rotate(1800deg);}
hope that helps.
EDIT:
if you still wish to use jQuery and not CSS, i'd suggest a plugin such as http://nnattawat.github.io/flip/
EDIT2:
if you still don't want the CSS approach, and not a jQuery plugin, i suggest you take a look here:
CSS rotation cross browser with jquery.animate()
"CSS-Transforms are not possible to animate with jQuery, yet. You can
do something like this [code sample]"
i also created a fiddle to demonstrate this approach: http://jsfiddle.net/jhcvb2ty/
Basic animates can't animate non-numeric CSS properties.
so use step function in animate then it works.
See example: http://jsfiddle.net/kevalbhatt18/epp06LL3/2/
$('#box').animate({ transformValue: -180 }, {
step: function(now,fx) {
$(this).css('transform','rotatex('+now+'deg)');
},
duration:'slow'
},'linear');
EDIT:
See example: http://jsfiddle.net/kevalbhatt18/u2ptr4jp/4/
Now simply add div inside parent span it will work for all.
Note: only first class you should know i.e in this example we have
box class so if we are at last box then it will flip to first box
$("div").click(function() {
var that = this;
$(this).animate({
transformValue: -180
}, {
step: function(now, fx) {
$(this).css('transform', 'rotatey(' + now + 'deg)');
},
complete: function() {
$(that).hide();
//$('#box').removeAttr( 'style' );
var nextObject = $(that).next()
var nextClass = nextObject.attr('class')
console.log($('#parent').children().hasClass(nextClass));
if ($('#parent').children().hasClass(nextClass)) {
var flipNext = nextClass;
console.log("true")
} else {
console.log("false")
var flipNext = "box";
console.log(flipNext);
}
secondFlip(flipNext, that);
},
duration: 'slow'
}, 'linear');
});
function secondFlip(nextID, that) {
$('.' + nextID).show();
$('.' + nextID).animate({
transformValue: 180
}, {
step: function(now, fx) {
$(this).css('transform', 'rotatex(' + now + 'deg)');
},
complete: function() {
},
duration: 'slow'
}, 'linear');
}
Edit: rotation issue solved
see this example: http://jsfiddle.net/kevalbhatt18/u2ptr4jp/6/
Final Output:
After so many tray I found solution.
see this example:http://jsfiddle.net/kevalbhatt18/oh07zuh0/
hear i find transformation degree.
(function ($) {
$.fn.rotationDegrees = function () {
var matrix = this.css("-webkit-transform") || this.css("-moz-transform") || this.css("-ms-transform") || this.css("-o-transform") || this.css("transform");
if (typeof matrix === 'string' && matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
} else {
var angle = 0;
}
return angle;
};
}(jQuery));
I am trying to create a parallax effect where images slide over a background, and the background moves too, but only very slightly. Is that possible with jQuery? I tried referencing both elements by ID with the animation but that isn't working.
$(document).ready(function() {
var timer;
$("#leftarrow").hover(function() {
timer = setInterval(function() {slideLeft();}, 50);
}, function() {
clearInterval(timer);
});
$("#rightarrow").hover(function() {
timer = setInterval(function() {slideRight();}, 50);
}, function() {
clearInterval(timer);
});
function slideLeft() {
$("img#background").stop().animate({
'left': '-=200px'
}, 50);
$(".mid").stop().animate({
'left': '-=20px'
}, 50);
}
function slideRight() {
$("img#background").stop().animate({
'left': '-=200px'
}, 50);
$(".mid").stop().animate({
'left': '+=20px'
}, 50);
}
});
Here is a fiddle: http://jsfiddle.net/rYYDv/
Thank you for your help.
Instead of using an img tag for the background, set the image inside a div, and adjust the div accordingly.
Here is my implementation - jsfiddle
Suppose you have an animation running with a certain time like this:
$('span').animate({opacity : 1}, 10000);
The animation is quite long so the user tries clicking the button again. The animation will be a certain amount of time through the animation already, which is probably going to be different every time.
On the second click is it possible to update the animation process keeping the opacity of the object when the user clicks, just changing the time it will take to finish?
Basically I want to update the animation process mid way through the animation.
You can use the step option of animate to keep track of how far along the animation is. Then with that information, you can calculate the time remaining in the animation. Then stop the current animation and start a new one with half the duration.
http://jsfiddle.net/MdD45/
EDIT
It looks like the 2nd parameter passed to step contains a property named pos which tells you what percentage along in the animation you are. That can simplify things further.
http://jsfiddle.net/MdD45/1/
var startVal = 0;
var endVal = 1;
var duration = 10000;
var howfar = 0;
$('span').css("opacity",startVal)
.animate({
opacity : endVal
}, {
duration: duration,
step: function(now, fx){
howfar = fx.pos; // between 0 and 1, tells how far along %
}
});
$("button").click(function(){
// calculate the new duration as half of the remaining duration
var timeRemaining = duration - (howfar * duration);
duration = timeRemaining / 2;
$('span').stop().animate({
opacity : endVal
}, {
duration: duration,
step: function(now, fx){
howfar = fx.pos; // between 0 and 1, tells how far along %
}
});
});
I put something together yesterday to skip in jQuery animations, here's the code, it should be pretty easy to modify for your use-case:
EDIT: Modified version:
Demo: http://jsfiddle.net/SO_AMK/fJyKM/
jQuery:
var time = 10000;
var opacity = 1;
var currentTime = 0;
$("#square").animate({
opacity: opacity
}, {
duration: time,
step: function(now, fx) {
currentTime = Math.round((now * time) / opacity);
},
easing: "linear"
});
$("#hurry").click(function() {
$("#square").stop().animate({
opacity: opacity
}, {
duration: ((time - currentTime) / 4), // Get remaining time, divide by 4
step: function(now, fx) {
currentTime = Math.round((now * time) / opacity);
},
easing: "linear"
});
});
It also works for other properties, like width. The only catch is that if it is a decreasing value than you need to use a different script.
yes you can ..
You have to stop the animation with "stop()" method then start a new animation against the same node on the same property and as a target value, the original one.
I'm not fully sure if this would work, but consider doing like this:
<div id="box"></div>
<style type="text/css">
div#box {
-webkit-transition: width 10s;
-moz-transition: width 10s;
transition: width 10s;
background: #000;
width: 100px;
}
div#box.speedy {
-webkit-transition: width 5s;
-moz-transition: width 5s;
transition: width 5s;
}
</style>
<script style="text/javascript">
$(function() {
$('div#box').css('width', '400');
setTimeout(function() {
$('div#box').addClass('box');
}, 2000);
});
</script>
Basicly let css animate it, and add another class that speeds the transition up.
I have successfully built a login form using ajax and want to add a shake effect to the form when the user enters incorrect details. I have the function in place that will fire but just need to build the jquery effect (note I know of jquery UI but don't want to use it! I don't want to use ANY plugins for this)
So far I have:
function shakeForm() {
var p = new Array(15, 30, 15, 0, -15, -30, -15, 0);
p = p.concat(p.concat(p));
$('form').css('left',p);
}
From what I understand I need to loop the array of values but how do I do that? Note that the element form has a position of relative already. So it's just a case of running those values as the left value in a random sequence?
Thanks
Why bother?
Animations are queued.
More - instead a left attribute you can use margin-left what prevents to adding position attribute :)
function shakeForm() {
var l = 20;
for( var i = 0; i <= 10; i++ ) {
$( 'form' ).animate( {
'margin-left': '+=' + ( l = -l ) + 'px',
'margin-right': '-=' + l + 'px'
}, 50);
}
}
Its better to use CSS to this instead of JS. CSS uses less resources(is faster) and its simpler.
You can find good (and 'ready to use') examples here: https://daneden.me/animate/
I have made a plugin for this .. check it http://static.mbiosinformatica.com.br/jQuery/
Is it working in IE ( 7 , 8 , 9 ) , Chrome and Firefox.
And, you can apply a callback function, to show error message .. or anything else.
$('#div').shake({
positions : { 'L' : 50 , 'R' : 50 } , // shake only left and right (U,L,R,D)
rotate : false , // rotate div on shake .. true/false
parent : false // shake parent div .. true/false
}, function(){ /* do something */ });
In the positions, you can send array too, just: positions: [ [ 'L', 50 ... ] ]
This value '50' its the shake distance from original position ..
To change timeout ( delay ) and effect duration, you have to set timeout: [you timeout .. / delay ] and the effect times .. interval: ...
mmm why use native js if jquery animate() is available... you try recurring like this:
var p = new Array(15, 30, 15, 0, -15, -30, -15, 0);
function shakeForm(index) {
if(typeof index === "undefined") index = 0;
if(typeof p[index] === "undefined") return false;
$("form").animate({
"left": p[index]
}, function() {
shakeForm(index + 1);
});
}
For those of you who are stubborn (like me) and hate libraries...
var e = document.getElementById('dividname');
e.style.marginLeft='8px';
setTimeout(function(){e.style.marginLeft='0px';},100);
setTimeout(function(){e.style.marginLeft='8px';},200);
setTimeout(function(){e.style.marginLeft='0px';},300);
then in your css:
.shakeClass{
transition: margin 100ms;
}
loop throw the array using jQuery.each: http://jsfiddle.net/N8F7Z/1/
function shakeForm() {
var p = "15 30 15 0 -15 -30 -15 0".split(" ");
$.each(p, function(key, value) {
var delay = 100;
setTimeout(function() {
$("form").css("left", value + "px");
}, delay*key);
});
}
A simple way to make an array is splitting a string with every space:
var p = "15 30 15 0 -15 -30 -15 0".split(" ");
The delay between each step:
var delay = 100;
Using setTimeout(function() {...}, theTimeBeforeFiring )
theTimeBeforeFiring = delay * key
key is the key the value has in the array:
key = 0, 1, 2, 3
jquery animations are queued by default, so you just need to call animate for each element of the array:
function shakeForm() {
var p = [15, 30, 15, 0, -15, -30, -15, 0];
var x = $('form').offset().left;
var speed = 40;
$.each(p, function() {
$('form').animate({'left': x + this}, speed);
});
}
Example: http://jsfiddle.net/3qdFL/
The examples above change the original position of the element.
function shakeForm() {
var margin = 15;
var speed = 50;
var times = 5;
for( var i = 0; i < times; i++ ){
$( "form" ).animate( { 'margin-left': "+=" + ( margin = -margin ) + 'px' }, speed);
$( "form" ).animate( { 'margin-right': "+=" + ( margin = -margin ) + 'px' }, speed);
$( "form" ).animate( { 'margin-right': "+=" + ( margin = -margin ) + 'px' }, speed);
$( "form" ).animate( { 'margin-left': "+=" + ( margin = -margin ) + 'px' }, speed);
}
}
demo here http://jsfiddle.net/UW6tN/1/
why not use css3 animations? less over head in my opinion. There so many plugins that exist because so many reinvent the wheel... I searched for the same thing and got 20 results of forums, and jquery plugins(yet another script to add)..but I found this and it works of coarse.
not my answer but it pure css3!
CSS animation similar to Mac OS X 10.8 invalid password "shake"?