Develop Reference

Replace jQuery animation with Angular animation

One of my ng-views has a next structure
<div class="container-fluid wrapper">
<aside ng-if="asideMenu">
<div ng-include src="'html/partials/stats/aside.html'"></div>
</aside>
<section>
<div ng-include src="'html/partials/stats/grid.html'"></div>
<div ng-include src="'html/partials/stats/tabs.html'"></div>
</section>
where I have a grid and tabs as a major content and if user wants he can open aside bar. The function to open aside bar is
$scope.asideMenu = false;
$scope.aside = function () {
getTree();
var section = document.getElementsByTagName("section");
var aside = document.getElementsByTagName("aside");
$scope.asideMenu = !$scope.asideMenu;
if ($scope.asideMenu == true) {
$(section).animate({
'width': '84%'
}, 500, function () {
$(aside).animate({
'width': '15%'
});
});
}
else {
$(aside).animate({
'width': '0%'
}, 1000, function () {
$(section).animate({
'width': '100%'
});
});
}
};
So currently I'm using jQuery animation to open aside menu and shrink major content.
The question is simple, what is the best way to replace jQuery animation to Angular & CSS animation (without any additional dependencies and libs)??
This is simple example of my page

Tick label position of seiyria/bootstrap-slider are not correct

I am using seiyria bootstrap slider in which tick labels are dynamic. Here you can see the ticks are correctly aligned but their labels are not.
following is the sample markup
<div class="container">
<div class="examples">
<div class='slider-example'>
<h3>Example 13:</h3>
<p>Using ticks.</p>
<div class="well">
<input id="ex13" type="text" data-slider-ticks="[100, 150, 180, 300, 400]" data-slider-ticks-labels='["$100", "$150", "$180", "$300", "$400"]' />
</div>
</div>
</div>
Here is a jsFiddle showing the issue
Here is an image to show the issue:

This is a limitation of the bootstrap-slider plugin in its official state (confirmed by the author in the comments below).
However, with some tweaking to the plugin, you could make it do what you want.
jsFiddle Example
Specifically, this is what I changed to achieve this effect:
I changed this CSS rule (you should really override the original rule for your specific container rather than changing the plugin CSS as I have done for simplicity sake):
.slider.slider-horizontal {
width: 100%; /*changed*/
height: 20px;
}
I added this default option to the plugin:
Slider.prototype = {
//....
defaultOptions: {
//...
modify_label_layout:false // added this option
},
//....
Then, I added these two functions to the plugin:
_modifyLabelOffset: function(){
var positions = [];
var $sliderContainer=$(this.element).prevAll('.slider');
var $ticks = $sliderContainer.find('.slider-tick');
var $labels = $sliderContainer.find('.slider-tick-label');
$sliderContainer.css('margin-bottom', '12px');
$ticks.each(function () {
var $this = $(this);
var tickWidth = $this.width();
var tickLeft = $this.position().left;
positions.push(tickLeft - (tickWidth))
});
$labels.each(function (i,e) {
var $this = $(this);
$this.css('width', 'auto');
$this.css('position', 'absolute');
$this.css('left', positions[i]+'px');
});
$this=this;
$( window ).resize(function() {
$this._delay(function(){
$this._modifyLabelOffset();
}, 500);
});
},
_delay: (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})(),
I changed the initialization of the plugin to this:
$("#ex13").slider({
ticks: [100, 150, 180, 300, 400],
ticks_labels: ['$100', '$150', '$180', '$300', '$400'],
ticks_snap_bounds: 30,
modify_label_layout:true // added this option to the plugin, if true the layout of the lables will be modified
}).slider('setValue', 0); // starts out at 5 for some reason, weird, for now , just set it manually to 0
Note that this is a bit of a hack and could undoubtedly be incorporated into the plugin in a better way. Also, I have ONLY tested this in chrome. It may not function correctly in other browsers but this shows proof of concept so Ill let you take it from there :)
Original Answer:
I believe this is a limitation of the bootstrap-slider plugin.
Note that if you use evenly spaced numbers like so:
data-slider-ticks="[100, 200, 300, 400, 500]"
the labels are correctly positioned. see this jsFiddle
The plugin will let you use small numbers relatively close together as you have done here but even their own example page displays issues with the layout when doing so:

Re-animating in slide when navigated to: JavaScript

I have a one page website which makes use of full-screen slides(powered by fullPage.js).
I have this script running to animate some text when the page first loads (the first page is the one with animation)
Im fairly new to JS so I was wondering how I would make it perform the animation every-time the user navigates to the slide?
JS:
$(document).ready(function() {
$.fn.fullpage({
slidesColor: ['#161616', '#161616'],
anchors: ['', 'Bye']});
$(".test").each(function(i) {
$(this).delay(i*600).animate({ opacity: 1 }, 700)
});
});
</script>
It just animates three spans.
I'd like it to animate them again when I navigate back to the slide. Also how do I get it to set the opacity = 0 when navigated to another slide?(so that it can be reanimated
HTML:
<div class="section active" id="section0">
<h1>?</h1>
<h2><span class="test">1.</span> <span class="test">2.</span> <span class="test">3.</span></h2>
<a onclick="javascript:window.location='#CV';"><img class="downArrow" src="images/arrow.svg"/></a>
CSS for .test:
.test{
opacity: 0;
}

So here is how I did it. Notice I used fadeOut() to change the opacity, this was because changing the css opacity was unstable sometimes it wouldnt change all the elements.
<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
anchors: ['1', '2'],
afterRender: function(){
//For the initial animation, aferLoad does not work.
$(".test").each(function(i){
$(this).delay(i*600).animate({ opacity: 1 }, 900);
});
},
afterLoad: function( anchorLink, index, slideAnchor, slideIndex){
//When the first slide is navigated to perform animation.
if(anchorLink == '1'){
$(".test").each(function(i){
$(this).delay(i*600).animate({ opacity: 1 }, 900);
});
}
},
onLeave: function(index, direction){
//When navigated away from first slide reset the opacity.
if(index == '1' && direction == 'down'){
$(".test").fadeTo(400,0);
}
}
});
});
</script>

Where to put clearQueue in jQuery code

I have the following code:
$("#myDiv").hover(
function () {
$(this).clearQueue().animate({
backgroundColor: "#d7df23",
opacity: 0.95
}, 250).find(".thumb").clearQueue().animate({
backgroundColor: "#FFF"
}, 250).attr('src','myIMG.jpg');
$(this).next("div").clearQueue().fadeIn(150); // THIS MAY BE WHERE THE PROBLEM IS...
},
function () {
$(this).clearQueue().animate({
backgroundColor: "#222",
opacity: 0.90
}, 250).find(".thumb").clearQueue().animate({
backgroundColor: "#000"
}, 250).attr('src','myIMGup.jpg');
$(this).next("div").clearQueue().fadeOut(500); // THIS ALSO MAY BE WHERE THE PROBLEM IS...
}
);
The first part of the hover function works fine, but as soon as I need to do anything with the next div I get problems. The code above works if you wait for the animations to complete before moving the mouse over and away, but if you mouseout before the animation is finished on hover the next div vanishes and I can't get it to appear at all.
Any ideas? I think it might have something to do with all the clearQueue's I have...
EDIT:
Example HTML:
<div class="container">
<div id="myDiv">
<img src="myIMGup.jpg" class="thumb" />
<h2>The Header</h2>
</div>
<div>
<h3>Popup Header...</h3>
<p>Blah Blah Blah...</p>
</div>
</div>

i think you are looking for stop(true, true) or stop(true, false) depending on whether or not you want your animation to be fluid or not...
reference:
http://api.jquery.com/stop/
hope this helps -ck
NEW ANSWER:
use this to hide:
$(this).next("div").stop(true).animate({opacity:0});
and this to show:
$(this).next("div").stop(true).animate({opacity:1});
instead of fadeIn() and fadeOut()
jQuery remembers the start that the opacity is in when you use fadeIn/fadeOut and because you are halting the animation essentially you are "jamming" fadeIn/fadeOut to go to the stopped opacity
hope this helps -ck
MOAR ANSWER!!1! :
if you also need the actual "hide" eg. .display set to 'none'
use it like this:
$(this).next("div").stop(true).show().animate({opacity:1});
and
$(this).next("div").stop(true).animate({opacity:0}, function() { $(this).hide() });
if I were doing this I'd wrap it nicely like this:
$.fn.myFade = function(fadeIn) {
return this
.stop(true)
.show()
.fadeTo('fast', +!!fadeIn, function() { !fadeIn && $(this).hide(); });
};
$(this).next("div").myFade(true); // show
$(this).next("div").myFade(false); // hide
Fully Functioning Demo Action Activate: http://jsbin.com/isumiw
hope THIS helps lol -ck

Why the box disappear immediately?

I want the mouseover on the coverImg then show the coverInfo
the coverInfo show the title and the description of the image
then the coverInfo do show
but I want the coverInfo stay and clickable when mouserover on itself
but it disappear immediately.
So what's the point I have missed?
The HTML
<div class="workshop_img">
<div class="coverInfo"></div>
<a href="#">
<span class="coverImg" style="background-image:url('images/work/show1.jpg')" title="Chictopia "></span>
</a>
The CSS：
.coverInfo {
position:absolute;
width: 200px;
height:200px;
background:rgba(0,0,0,0.5);
top:30%;
left:30%;
display:none;
}
see the jQuery code
$(function() {
$(".coverImg").each(function() {
//make the background image move a little pixels
$(this).css({
'backgroundPosition' : "-40px 0"
}).mouseover(function() {
$(this).stop().animate({
'backgroundPosition' : " -20px -60px "
}, {
duration : 90
});
//shwo the info box
var content = $(this).attr("title");
$("<div class='coverInfo'></div>").text(content).prependTo($(this).parent()).fadeIn("fast");
}).mouseout(function() {
$(this).stop().animate({
'backgroundPosition' : "-40px 0"
}, {
duration : 200,
});
$(this).parent().find(".coverInfo").stop().fadeOut("fast");
})
})
});
</div>
EDIT：
I have searched a lot and find something similar, I took them and the answer given below together to solve my problem, here is the code:
$(function() {
$(".coverImg").css({
'backgroundPosition' : "-40px 0"
}).mouseenter(function() {
var box = $(this).parents(".workshop_img").find(".coverInfo");
var content = $(this).attr("title");
var info = box.text(content);
$(this).stop().animate({
'backgroundPosition' : " -20px -60px "
},90);
info.show();
}).mouseleave(function() {
var box = $(this).parents(".workshop_img").find(".coverInfo");
var content = $(this).attr("title");
var info = box.text(content);
$(this).stop().animate({
'backgroundPosition' : "-40px 0"
},200);
info.stop().hide();
});
});
It has just been clean, but do not work fine.
What's the problem?

The new box shows immediately because it is not initially marked as hidden. .fadeIn() only fades in something that is initially not showing.
You can make it initially not visible like this:
$("<div class='coverInfo'></div>").text(content).hide().prependTo($(this).parent()).fadeIn("fast");
You also can get rid of the .each() iterator you're using. You don't need it. You can just use:
$(".coverImg").css(...).mouseover(...).mouseout(...);
You don't need the .each() at all.
I'd also suggest you use .hover(fn1, fn2) instead of .mouseover(fn1) and .mouseout(fn2).
And, it looks like you are creating a new object and inserting it on every mouseover event such that multiple such objects will pile up in the page. You should either .remove() the object in the mouseout function or you should reuse a previously existing element if it exists in the element rather than creating more and more of them.
Sometimes when you are using the events for mouse hovering and you are also changing the page, the change to the page can cause the element to lose the mouse hover which then hides the change to the page and then it all starts over again. I can't tell for sure if that is happening in your case (I'd need a working example to play with to see), but it seems possible.