Develop Reference

Animating class toggle/element swap

I've written a function that swaps a "Menu" button with a "Close" button when clicked (hiding one div and displaying another), and vice versa. I'm struggling to add an animation to the toggle of each swap.
This is what I have:
$(document).ready(function() {
$('#menu-button').on('click', function() {
$('#menu-button').toggleClass('inactive', 1000);
$('#close-button').toggleClass('inactive', 1000).toggleClass('active', 1000);
});
$('.close-trigger').on('click', function() {
$('#close-button').toggleClass('active').toggleClass('inactive', 1000);
$('#menu-button').toggleClass('inactive', 1000).toggleClass('active', 1000);
});
});
I've also tried fadeIn/fadeOut/fadeToggle instead of toggleClass to no avail. The problem with fadeToggle is that both elements briefly appear at the same time, and there's still no fade animation. Is there a better way to program this?

please try this
$(document).ready(function() {
$('#button1').on('click', function() {
$('#button1').hide();
$('#button2').show().addClass('toggle');
});
$('#button2').on('click', function() {
$('#button2').hide();
$('#button1').show().addClass('toggle');
});
});
#button2
{
display:none;
}
.button.toggle
{
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button id="button1" class="button" >button1</button>
<button id="button2" class="button" >button2</button>

If you wish to use toggleClass, you must accompany it with a CSS transition in your stylesheet. Otherwise, the element will simply disappear, as toggleClass does not provide animation by itself.
A CSS transition would be simple to add to your stylesheet, all that would be necessary would be to place these properties on the rule for your class:
transition-property: all;
transition-duration: 0.5s; /* or however long you need it to be */
Remember that properties such as display cannot be animated, so you must control the appearance using a property such as opacity, which can be animated because it is a number.

toggleClass() doesn't allow animation. The second argument is not the time. See the docs:
http://api.jquery.com/toggleclass/
I guess the best for you would be CSS transition:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
If you don't want to use transition, that would do the thing:
$('#menu-button').on('click', function() {
$('#menu-button').hide();
$('#close-button').fadeIn();
});
$('.close-trigger').on('click', function() {
$('#close-button').hide();
$('#menu-button').fadeIn();
});

jQuery - how to remove a class from an element with a given delay?

When a user updates a record in the database, I'll modify the record using an AJAX request. Then, I add to the rendered div a class by calling the addClass method. The class I add (let's call the class colored) to the div contains only a background color directive (to highlight the current modified record).
So far so good.
Now I want to remove this class with a fadeOut effect, after 1 second.
I've tried these approaches, but in both cases it's not only removing the class but the whole div.
$("#id1").fadeOut(1000, function() {
$(this).removeClass('colored');
});
or
$("#id1").delay(1000).fadeOut().removeClass('updated_item');
Why is the div removed instead of the class ? Actually, the div is getting a display: none; style - I see this in the console.

fadeOut will fade the entire element out and hide it from the screen. If you want to fade the effects of the class, you can use jQuery UI .removeClass() (which accepts a time duration and fade effect, unlike regular jQuery) or CSS3 transitions.

You can use setTimeout function like this:
setTimeout(
function(){
$("#id1").removeClass('updated_item');
}
,1000 //1 second
)
And if you want to change the color with animation you can just add a transition style in your CSS like this:
.myDiv{
background:red;
transition:background 1s;
-webkit-transition:background 1s;
}
.colored
{
background:blue;
}

I dont know if I got it, is this what you want ?
Fiddle
jQuery('.action').click(function() {
jQuery(this).parent().addClass('highlight');
if ( confirm('Are you sure?') ) {
jQuery(this).parent().fadeOut(1000, function() {
jQuery(this).addClass('remove').removeClass('highlight');
});
} else {
jQuery(this).parent().removeClass('highlight');
}
});
.highlight {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
#1 Click me
</div>
<div>
#2 Click me
</div>

You're applying the fadeOut function to the div itself, not on the class:
//the div, will fadeout after 1000 ms and get the class removed
$("#id1").delay(1000).fadeOut().removeClass('updated_item');
If you want to remove the background-color with a fading effect, you'd have to use something like:
setTimeout(function() {
$('#id1').removeClass('updated_item');
}, 1000)
On the css side, use a transition for the fadeOut effect:
#id1 {
transition: background-color 0.5s ease;
}
.updated_item {
background-color: yellow;
}
Fiddle

jQuery - toggleClass() needs to start closed on refresh

Is there a way to make a menu that is closed by toggleClass() be closed automatically after refreshing the page?
The button that calls toggleClass() works perfectly. The session also remembers if the menu is hidden, so it performs the closing animation upon refresh. Is there an easy way to have the menu hidden when refreshed instead of performing the animation?
For further clarification, here is a quick video I took of the issue:
initialize: function()
{
if(sessionStorage.getItem('sidebar.open') == 'false')
{
this.toggle();
}
},
toggle: function()
{
var self = this;
$(this.sidebarEl).toggleClass('active');
_.each(this.contentEl, function(el)
{
$(el).toggleClass('active');
});
sessionStorage.setItem('sidebar.open',
$(this.sidebarEl).hasClass('active'));
},

I'm assuming the transition is a CSS transition, right? That's why you're only changing the class...
Think about maybe canceling the transition, and then re-appending it.
CSS
.notransition { /*class to cancel transition*/
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
HTML
<div class="menu nontransition">...</div> <!-- when the page is loaded, use nontransition... -->
JS
initialize: function()
{
if(sessionStorage.getItem('sidebar.open') == 'false')
{
this.toggle();
}
$(this.sidebarEl).removeClass("nontransition") // Then, delete nontransition, and allow the transition to work
},

Bootstrap 3 - How to fade-in alert box on-click and fade-out after 3 seconds

I am using AngularJS and Bootstrap 3. My web app has an "Update" button where it saves any changes the user makes. When the user clicks on the "Update" button, I want to activate and fade-in bootstrap's alert box saying "Information has been saved" and then fade-out after 3 seconds. I don't know how to create this function and may need some help..
UPDATE:
I have decided to use this approach:
HTML
<button type="button" class="btn btn-info" ng-click="save()">Update</button>
<div id = "alert_placeholder"></div>
JavaScript
$scope.save = function() {
$('#alert_placeholder').html('<div class="alert alert-warning alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><span>Your information has been updated.</span></div>')
setTimeout(function() {
$("div.alert").remove();
}, 3000);
}
I would like to make the alert box fade-in when it first appears and fade-out as it gets removed after 3 seconds, but I am not sure how to make it work with the code I have.

I use something like this. (The animation looks very pretty!). Simply add this JS, and apply the class flash to every item you want to disappear. MAKE SURE YOU ALSO ADD THE fade-in CLASS TO EVERYTHING! The fade-in class comes with bootstrap. It will fade out in 5 seconds.
window.setTimeout(function() {
$(".flash").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 5000);

Try something like this
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
-webkit-transition: opacity 3.0s linear;
-moz-transition: opacity 3.0s linear;
-o-transition: opacity 3.0s linear;
transition: opacity 3.0s linear;
}
You need to put the fade and fade.in property onto your alert box and alert box hide though. - But just set the transition times for both to match what you need. Basically what you are doing here is setting the opacity, then the length of time it is taking to do this. The reason we have 4 different values all with different times are to make it cross browser compatible.

I've used this approach to implement blinking
In a directive
..
element.addClass("blink");
$timeout(function () { element.removeClass("blink");} , 600 , false);
..
and blink is defined with transition
.blink { background-color : orange; transition : all linear 600ms; }

I have decided to use this piece of code as an alternative update indicator
http://jsfiddle.net/deC37/
<button type="button" data-loading-text="Saving..." class="btn btn-primary">Update</button>
$("button").click(function() {
var $btn = $(this);
$btn.button('loading');
// Then whatever you actually want to do i.e. submit form
// After that has finished, reset the button state using
setTimeout(function () {
$btn.button('reset');
}, 1000);
});

how to use animation with ng-repeat in angularjs

I have a list which I iterate over by using ng-repeat: and the user can interact with thte list items by using up-arrow and down-arrow icons and on click of them i simply change the order of the element in the "list" this is what angular suggests change the model and the changes automatically reflect in the view.
<div ng-repeat="item in list">
{{item.name}}
<div class="icon-up-arrow" ng-click="moveUp($index);"></div>
<div class="icon-down-arrow" ng-click="moveDown($index);"></div>
</div>
Logic in moveUp:-
$scope.moveUp= function(position){
var temp=list[position-1];
list[position-1]=list[position];
list[position=temp];
};
the above code works completely fine and similar is the logic for shifting the item down. But the problem that i want to resolve is how do i put animation? I know angular takes care of binding view and model on its own but is there any way to put in animation as the view is updated on pressing up an down arrow icons?

Following on from Marcel's comment: in AngularJS 1.2 you don't need to use the ng-animate directive. Instead:
Includeangular-animate[-min].js.
Make your module depend on ngAnimate.
Define your transitions in CSS using classes like .ng-enter and .ng-enter-active.
Use ng-repeat as you normally would.
HTML:
<div ng-app="foo">
<!-- Set up controllers etc, and then: -->
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
JavaScript:
angular.module('foo', ['ngAnimate']);
// controllers not shown
CSS:
li {
opacity: 1;
}
li.ng-enter {
-webkit-transition: 1s;
transition: 1s;
opacity: 0;
}
li.ng-enter-active {
opacity: 1;
}
Demo in (someone else's) Plunker.
See the docs for $animate for details on the progression through the various CSS classes.

Check this link http://www.nganimate.org/
You need to declare the ng-animate attribute to an element that have another directive that changes the DOM
div ng-repeat="item in itens" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"
You need to add css transitions or animation.
.animate-enter {
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
opacity: 0;
}
.animate-enter.animate-enter-active {
opacity: 1;
}
You can check plnkr example here: http://plnkr.co/edit/VfWsyg9d7xROoiW9HHRM

Complementing the last answer, there is the ng-move class for animations when order is changed:
li {
opacity: 1;
}
li.ng-move {
-webkit-transition: 1s;
transition: 1s;
opacity: 0;
}
li.ng-move-active {
opacity: 1;
}
Last documentation here.

If you don’t wish to use ‘ngAnimate’ module because of reduce the plugins count, you can archive the simple transition effect by using ng-init and custom directives.
<li ng-repeat="item in items" class="item" item-init>{{item.name}}</li>
.item{
opacity:0;
-webkit-transition: all linear 300ms;
transition: all linear 300ms;
}
.item.visible{
opacity:1;
}
myApp.directive('itemInit', function ($compile) {
return function (scope, element, attrs) {
scope.initItem(element);
};
});
In you controller
$scope.initItem = function(el){
$timeout(function(){
angular.element(el).addClass('visible');
},0);
}