$(function(){
$('#product .btn-purchase')
.mouseover(function(){
$(this).stop().animate($(this).addClass('.btn-purchase-hover'), {duration:500})
})
.mouseout(function(){
$(this).stop().animate($(this).removeClass('.btn-purchase-hover'), {duration:500})
});
});
.. not sure why this isn't work, what am I doing wrong?
The animate function predominately works on a numeric CSS property.
for details you can look here : http://api.jquery.com/animate/
EDIT:
I would suggest that you use the fadeIn / out method in jQuery instead. For instance , you could do something like this below. ( Code off the top of my head, assumes you have the div with the correct image after the .btn-purchase )
$(function(){
$('#product .btn-purchase')
.mouseover(function(){
var $this = $(this);
$this.fadeOut(function(){ $this.next().fadeIn(); });
})
.mouseout(function(){
$this.fadeOut(function(){ $this.prev().fadeIn(); });
});
});
I would also like to add that incase you are not supporting IE, then using CSS transitions may be of help.
Have a look at this answer animating addClass/removeClass with jquery since it is definately a better / more efficient method in my opinion
Shreyas N
I know, that this is not exactly an answer to your question. But as Jan commented before, you might think about implementing this in css.
Just to give you an idea what it might look like:
#product .btn-purchase{
background-color: blue;
transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
}
#product .btn-purchase:hover{
background-color: red;
}
You need to use document.ready so your code runs after the DOM has completely loaded, something like this :
$(document).ready(function() {
$('#product .btn-purchase')
.mouseover(function(){
$(this).stop().animate($(this).addClass('.btn-purchase-hover'), {duration:500})
})
.mouseout(function(){
$(this).stop().animate($(this).removeClass('.btn-purchase-hover'), {duration:500})
});
});
JQuery animate is used to animate CSS properties and not classes. As this answer shows, a better way might be to use CSS transitions (if you're only supporting CSS3). Alternatively, if you want to animate lots of things you'll need to supply them as CSS properties in the .animation() method.
Hope that solves you're issue.
Related
Could anyone please teach me how to add effects, say I would like some text to be faded when a button clicks, or make an alert box to do some cool stuff. I can't seem to find any tutorials on how to actually make it happen... Would love some help cheers!
Assuming that you have at least some experience in CSS and JS a good and easy solution is to add/remove a CSS classes on a JS event and react to that.
This could look like this in the JS:
jQuery( '.triggering_element' ).click( function( {
jQuery( '.receiving_element' ).addClass( 'effect' );
} );
and like this in the CSS:
.receiving_element {
opacity: 0.0;
visibility: hidden;
transition: all ease-in-out 1s;
}
.receiving_element.effect {
opacity: 1.0;
visibility: visible;
}
You can do all kinds of effects with this. Also pretty complex ones.
In the JS you can also use different events. Check out jQuerys on() for this.
Sometimes it is a good idea to add the class to the body instead to the receiving element like <body class="overlay_open"> ...
I think you get the point. If not, you have to learn some CSS and JS before you tackle things like effects ;)
I'm having a bit of a frustrating problem regarding fading out an element using jQuery after it has been faded in with CSS. I set up a CSS animation to fade in an element when the page loads using the following (I've also got the relevant browser prefixes included too, I'm using Stylus):
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.elem {
opacity: 0;
animation: fadein 500ms ease-in 1ms forwards;
}
My issue is that when an event handler is activated that runs the following, the fadeOut does not fade but instead skips straight to nothing:
$('.elem').fadeOut(400, function(){
$('.elem').fadeIn(400);
});
I've been able to replicate the issue in this JSFiddle. Can anyone help me out? :) Thanks a lot!
I would say it's conflicting with the CSS you're using. jQuery is probably using other opacity related properties than what your CSS is. An all jQuery solution might be this:
CSS
.elem {
display: none;
}
jQuery
$('.elem').fadeIn(1000); // on page load, fade in with jQuery
$('#go').click(function(){
$('.elem').fadeOut(400, function(){
$('.elem').fadeIn(400);
});
});
Related: Conflict between CSS transition and jQuery fade
I know you asked for FadeIn and FadeOut... here's your code with animate and opacity instead.
$('#go').click(function(){
$('.elem').css('animation','none').animate({
'opacity' : 0
},function(){
$('.elem').animate({
'opacity' : 1
});
});
});
It seems that the css-animation has higher precedence than the inline style that jQuery applies to the element when fadeOut is used. This means the animation's opacity : 1; overrides any opacity setting jQuery applies, up until jQuery sets the element to display:none;
You can do this to get around:
$('#go').click(function(){
$('.elem').css('animation','none').fadeOut(400, function(){
$('.elem').fadeIn(400);
});
});
I'm working on creating a mini-sort plugin with jquery.
I want to have the option to trigger css animations on click event, but I found out animation don't get triggered on elements that have been hidden using display: none;.
I tried with creating a class and applying that class to the element but this won't work.
$('.legend li').on('click',function(){
var thisClass = $(this).attr('class');
$('div').not('.'+thisClass).removeClass('active');
$('div.'+thisClass).addClass('active');
});
I found a plugin which has the same functionality that I wan't but I would like to try to build something smaller and I always like to attempt myself as a learning experience before resorting to plugins. I'm a bit confused as to how they run the animations. It looks like inline css but when I tried to add inline transitions there was no effect. Even though I could see the transitions in the style tag.
Edit
Here is a fiddle.
http://jsfiddle.net/NktDU/1/
You could use jQuery's hide and show instead
Updated demo
$('#grid div').not('.'+thisClass).hide("fast").removeClass('active');
$('#grid div.'+thisClass).show("fast").addClass('active');
and remove display:none from the CSS
Or you could do it just using CSS transitions and toggling the width, like so
#grid div {
display: block;
height: 20px;
width: 0px;
margin:0px;
float: left;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
background: black;
}
#grid .active {
width:20px;
margin: 2px;
}
Demo for that
I think the library you would have to write for something like this is immense. In this case, I highly recommend you work on implementing Isotope by David DeSandro.
Is this the plugin you were talking about? I can assure you that while you want to come up with your own solution, you can make isotope your own. I've implemented it a couple of times. You will learn a lot, while at the same time, learning how jQuery/JS/CSS (and media queries) work together.
I've implemented the click to sort, and I also created my own sort by keyword search. I can put together a couple of fiddles if you want...
Edit:
I just saw the link to the plugin you found... it actually uses isotope's framework and recommends you use isotope in certain situations.
Good luck!
Looking for a way to do something like this.
Where when you click on a section it nicely transitions them.
Would it be a Jquery plug in or done with CSS?
You can do it with both jQuery and CSS, however the CSS support is a little worse than the jQuery-centric solution.
Try something like this for use with jQuery...
$('outerdiv').click(function() {
// `this` being the html element clicked on
$(this).fadeOut(function() { //After fadeOut completes,
$('.page-to-show').fadeIn(); //Fade in target page
});
});
Let me know if you need more advice on how to get this set up.
It looks like you want something along the lines of this plug-in: Quicksand
try this one.
Note:.cont stands for the name of the div or the body that u want to fade or something
.cont{
animation: transitionIn 2s;
}
#keyframes transitionIn{
from{
opacity: 0;
transform: rotateX(-10deg);
}
to{
opacity: 1;
transform: rotateX(0);
}
}
I am trying to get off javascript animations and use CSS animations instead. I am currently using jQuery's animation functionality.
I came across this website with a bunch of wonderful css animations. Such as:
.demo1 {
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;
}
.demo1:hover {
-webkit-transform:translate(0px,10px);
-moz-transform:translate(0px,-10px);
-ms-transform:translate(0px,-10px);
-o-transform:translate(0px,10px);
transform:translate(0px,-10px);
}
What I can't figure out is how to activate these animations programmatically. So for example, instead of on a hover, how can I translate the element by calling elem.translate()?
I may be misinterpreting what you're asking, but I think you may be under a mistaken impression of what "translate" is on an element. A DOM element has an attribute called "translate", as well as a css property "translate". However, the element attribute "translate" is just a boolean flag specifying whether the text in the element should be translated in the linguistic sense, it is not a callable function and has nothing to do with the css property.
That aside, there are still plenty of ways to translate an element programmatically. Some other people already gave a pretty good idea of how to do this with jQuery. If you don't wish to use jQuery, you can still add and remove classes manually (same goes for styles).
Here's an example I cooked up for class addition/removal. It's pretty straightforward, but here's the relevant code for class modification:
.translator {
-webkit-transform:translate(0px,100px);
-moz-transform:translate(0px,-100px);
-ms-transform:translate(0px,-100px);
-o-transform:translate(0px,100px);
transform:translate(0px,-100px);
}
...
function move_box() {
var the_box = document.getElementById("the-box");
if (the_box.classList.contains("translator")) {
the_box.classList.remove("translator");
} else {
the_box.classList.add("translator");
}
}
By applying the class, the animation will begin (and removing it will reverse it). This can happen as many times as you'd like.
One important note: for this example, I still have the style "transition:all .5s ease-out;" applied to the div before anything happens. This is just a universal default that governs how animation effects are applied to the element. There are a couple of different approaches to this, but for simplicities sake I'm going to just leave it like this.
Otherwise, you can add the styles directly, like so:
function move_box() {
var the_box = document.getElementById("the-box");
set_translate(the_box, 100);
}
function set_translate(e, pix) {
e.style["-webkit-transform"] = "translate(0px, "+ pix +"px)";
e.style["-moz-transform"] = "translate(0px, -" + pix +"px)";
e.style["-ms-transform"] = "translate(0px, -" + pix + "px)";
e.style["-o-transform"] = "translate(0px, " + pix + "px)";
e.style["transform"] = "translate(0px, -" + pix + "px)";
}
Nothing too complex here - it sets each relevant element directly by manipulating the styles on the element. As before, it relies on a separate class to specify the transition style.
Personally, I think the class addition/removal is far superior. Technically speaking, direct modification of styles is more flexible, but if that's what you're aiming for you probably should use a good library like jQuery transit (as mentioned in the comments). However, if you just want to be able to programmatically apply a few canned effects, modifying classes on the fly is a fine solution.
If you already have the CSS in place, you can trigger it in jquery by doing $('.demo1').trigger('hover'); to simulate a hover event, or change your css selector from .demo:hover to .class-name and just add that class using $('.demo').addClass('class-name');
You can use jQuery.css.fn to apply the css rules.
$('.demo1').click(function(){
$(this).css({
transform: 'translate(0px,-10px)'
});
});
Or add a class to the element:
$('.demo1').click(function(){
$(this).toggleClass('translate');
});
.translate {
-webkit-transform:translate(0px,10px);
-moz-transform:translate(0px,-10px);
-ms-transform:translate(0px,-10px);
-o-transform:translate(0px,10px);
transform:translate(0px,-10px);
}