Develop Reference

AngularJS Animation Tabs Won't Fade In

I've been trying to get AngularJS to fade in a tab pane when you select. I have it on jsfiddle
I have the following CSS to animate it with:
.tab-pane.active-add {
transition: opacity 10s;
opacity: 0
}
.tab-pane.active-add.active-add-active {
opacity: 1;
}
As you can see when you go to the fiddle it does not fade in when you change a tab.

use a .css like this:
.tab-pane.active:not(.show) {
opacity: 0;
}
.tab-pane.active{
opacity:1;
transition: opacity 2s;
}
Then declare a new variable
$scope.active_show=0;
Now use ng-class to add the two classes
<div class="tab-pane" ng-class="{active: active === $index,
show: active_show === $index}"
ng-repeat="tab in tabs">
{{tab.content}}
</div>
And change your function like
$scope.setActive = function(index) {
$scope.active = index;
setTimeout(()=>{
$scope.active_show=index;
$scope.$apply();
})
}
The idea is that your div, when active has first a class .active and in a new cycle -it's the function of setTimeOut- the class is .active.show
your fork jsfiddle
NOTE: I use the use of .show/not(.show) because it's the way, e.g. bootstrap, use
NOTE2: I imagine you're work in an old project, AngularJs is a bit old and soon you Sooner rather than later should change to Angular

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

Javascript Function for mouse events

I am trying to change the following code so that instead of having to click-and-hold the linked image to make it bigger (150 into 300), I could click it once to make the image bigger, and click it again to make the image return to smaller. I have to do this with multiple images on the page. (Be forewarned, I do not really understand jquery and have a very basic understanding of javascript. But I'm learning!)
function Down(sender)
{ var thisWidth=parseInt(sender.style.width.replace('px',''));
sender.style.width=(300) + 'px';}
function Up(sender)
{ var thisWidth=parseInt(sender.style.width.replace('px',''));
sender.style.width=(150) + 'px';}'
<img src="picture.jpg" onmousedown="Down(this)" onmouseup="Up(this)" />

You could toggle a class.
Firstly, you should set a class to target specific element(s) and setting width attribute is preferred method:
<img class="imgToggling" src="picture.jpg" width="150">
Now, set relevant CSS for a big class:
.big {
width: 300px;
}
Then on click, toggle this class, binding event using jQuery (preferred over inline scripting):
$(function () { //shorthand for document ready handler
$('.imgToggling').on('click', function () {
$(this).toggleClass('big');
});
});
-DEMO-
If you wish to get some kind of transition, add this CSS rule e.g:
img.imgToggling {
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
-DEMO with transition-

I have to do this with multiple images on the page.
Then you can do this with jQuery (as jQuery is tagged):
$('img').on('click', function(){
var thisWidth=$(this).width(),
setWidth = thisWidth >= 300 ? 150 : 300;
$(this).width(setWidth);
});
assumed if images are not dynamically generated or placed with ajax in the dom.

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);
});