I want to animate the Knob circle that it fills up on hovering. I'm new to Knob so i have no idea where my error is or if i even have the right direction. Right now it does not even show a circle :(
Basically i just want to have a circle around an icon that fills up on hovering. Maybe i can achieve that easier?
This is the sollution of it plus a little fix that i will start and stop at the right values, so you can interupt the animation without breaking it
the HTML:
<input type="text" value="0" id="circle" />
the Javascript:
$(function() {
$('.circle').knob({
min: '0',
max: '100',
readOnly: true,
displayInput: false
});
$('.circle').parent().hover( function() {console.log("hover");
$({ value: $('.circle').val() }).animate(
{ value: 100 },
{ duration: 300,
easing: 'swing',
progress: function() {
$('.circle').val(Math.round(this.value)).trigger('change');
}
});
}, function() {
$({ value: $('.circle').val() }).animate(
{ value: 0 },
{
duration: 300,
easing: 'swing',
progress: function() {
$('.circle').val(Math.round(this.value)).trigger('change');
}
});
});
});
Here is the JSFiddle
you need to change the hover handler to the parent of #circle or change displayInput to true
$(function() {
$('#circle').knob({
min: '0',
max: '100',
readOnly: true,
displayInput: false
});
//$('#circle').parent() is the new div that contains the input and the canvas
$('#circle').parent().hover( function() {
$({ value: 0 }).animate(
{ value: 100 },
{ duration: 1000,
easing: 'swing',
progress: function() {
$('#circle').val(Math.round(this.value)).trigger('change');
}
});
}, function() {
$({ value: 100 }).animate(
{ value: 0 },
{
duration: 1000,
easing: 'swing',
progress: function() {
$('#circle').val(Math.round(this.value)).trigger('change');
}
});
});
});//you need to close with ');'
you need to include the knob.js in the fiddle or else you get a '404 Not Found' error and include jquery or else you get this error 'Uncaught ReferenceError: $ is not defined'
http://jsfiddle.net/dWsuP/1/
Related
I did some research and I couldn't understand what is 'Counter' ? is it predefined in js/jquery ? or is it a css property ?
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
I have a small problem on my jQuery animation.
I want a button which change the width of a div from 100% to 72.5%. Next to this div could be another div which could fill the rest space (width 22.5%, 5% margin)
It could do following things step by step:
Div 1 get a border
div 1 change his width
div 2 get opacity and change his width
Here is my code:
var hidden = true;
function openEditMenu(){
var em = document.getElementById("editMenu");
var rf = document.getElementById("reportField");
if(hidden){
$({alpha:0}).animate({alpha:1}, {
duration: 1500,
step: function(){
rf.style.border ="1px solid rgba(0,0,0,"+this.alpha+")";
}
});
$("#editMenu").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},1000);
$(em).animate({width: "22.5%"},{ duration: 1000, queue: false });
$(rf).animate({width: "72.5%"},{ duration: 1000, queue: false });
$(rf).animate({marginRight: "5%"},{ duration: 1000, queue: false });
}
else{
$({alpha:1}).animate({alpha:0}, {
duration: 1000,
step: function(){
rf.style.border ="1px solid rgba(0,0,0,"+this.alpha+")";
}
});
$(em).animate({width: "0%"},{ duration: 1000, queue: false });
$(rf).animate({width: "100%"},{ duration: 1000 });
$(rf).animate({marginRight: "0%"},{ duration: 1000, queue: false });
$("#editMenu").css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0.0},1000);
}
hidden = !hidden;
}
Like you can see in the example now everything happens on the same time. But I want that everything works step by step.
var hidden = true;
function openEditMenu() {
var em = document.getElementById("editMenu");
var rf = document.getElementById("reportField");
if (hidden) {
$({
alpha: 0
}).animate({
alpha: 1
}, {
duration: 1500,
step: function() {
rf.style.border = "1px solid rgba(0,0,0," + this.alpha + ")";
}
});
$("#editMenu").css({
opacity: 0.0,
visibility: "visible"
}).animate({
opacity: 1.0
}, 1000);
$(em).animate({
width: "22.5%"
}, {
duration: 1000,
queue: false
});
$(rf).animate({
width: "72.5%"
}, {
duration: 1000,
queue: false
});
$(rf).animate({
marginRight: "5%"
}, {
duration: 1000,
queue: false
});
} else {
$({
alpha: 1
}).animate({
alpha: 0
}, {
duration: 1000,
step: function() {
rf.style.border = "1px solid rgba(0,0,0," + this.alpha + ")";
}
});
$(em).animate({
width: "0%"
}, {
duration: 1000,
queue: false
});
$(rf).animate({
width: "100%"
}, {
duration: 1000
});
$(rf).animate({
marginRight: "0%"
}, {
duration: 1000,
queue: false
});
$("#editMenu").css({
opacity: 1.0,
visibility: "visible"
}).animate({
opacity: 0.0
}, 1000);
}
hidden = !hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:inline-flex;width:100%;">
<div id="reportField" style="width:100%; height:50px; background-color:blue;">
a
</div>
<div id="editMenu" style="width:0%; height:50px; background-color:red; visibility: hidden;">
b
</div>
</div>
<button onclick="openEditMenu()">
</button>
I know this solution:
$('#id').animate(
{ left: new value },
duration, function() {
// Animation complete.
});
But it doesnt works on my alpha animation.
I've included the waypoints.js script on my site. Now I would like to connect this script with some jquery. The script should "start" if the content is in the viewport.
On a different site I used
$('.fly-in-animation').waypoint(function() {
$(this.element).addClass('animated fadeInUp');
}, { offset: '100%' });
But I've no idea how to connect the waypoints script with these jquery:
$({countNum: $('#counter-laender').text()}).animate({countNum: 14}, {
duration: 2000,
easing:'linear',
step: function() {
$('#counter-laender').text(Math.floor(this.countNum));
},
complete: function() {
$('#counter-laender').text(this.countNum);
}
});
Using the sample code from Waypoints site combined with what you provided (assuming you want this to happen when #counter-laender enters the viewport):
$(document).ready(function() {
$('#counter-laender').waypoint(function() {
myFunction();
});
});
function myFunction() {
$({
countNum: $('#counter-laender').text()
}).animate({
countNum: 14
}, {
duration: 2000,
easing: 'linear',
step: function () {
$('#counter-laender').text(Math.floor(this.countNum));
},
complete: function () {
$('#counter-laender').text(this.countNum);
}
});
}
I am using the following side slide menu for my project :-
http://www.mywork.com.au/blog/demos/facebook-sidebar-menu/
I've changed the left slide-in to right slide-in. It works very well for me on the desktop but in ipad and phone the page wrapper has a lagging-behind/scrolling effect. It seems like that the page wrapper scrolls from right to the left under the side menu container after the menu has appeared.
I've tried using "fast", "slow" and other properties of animate but don't seem to figure out what exactly needs to be done.
$(".m-menu").toggle(function() {
$('#mobile-menu-bg').animate(
{ right: '0', speed: '1500' },
1500
//{ duration: 500, queue: false },
);
$('#page-wrapper').animate(
{ 'margin-left': '-80%', speed: '1000' },
1000
//{ duration: 500, queue: false }
);
}, function() {
$('#mobile-menu-bg').animate(
{ right: '-80%' }
//{ duration: 500, queue: false }
);
$('#page-wrapper').animate(
{ 'margin-left': '0' }
//{ duration: 500, queue: false }
);
}
);
Please help
jQuery(function($) {
var buttons = {
previous: jQuery('#lofslidecontent45 .lof-previous'),
next: jQuery('#lofslidecontent45 .lof-next')
};
window.setTimeout(function(){
$obj = jQuery('#lofslidecontent45').lofJSidernews({
interval: 4000,
direction: 'opacitys',
easing: 'easeInOutExpo',
duration: 1200,
auto: true,
maxItemDisplay: 3,
navPosition: 'horizontal', // horizontal
navigatorHeight: 40,
navigatorWidth: 70,
mainWidth: 1000,
buttons: buttons,
isPreloaded:false
});
},500);
});
How to configure pause on hover?
is there any reference for this slider?
or is there any option like hover: stop?
there is no such config like hover: "stop".
But if you look in the actual .js file, you will find
$( obj ).hover(function(){
self.stop();
$buttonControl.addClass("action-start").removeClass("action-stop").addClass("hover-stop");
}, function(){
if( $buttonControl.hasClass("hover-stop") ){
if( self.settings.auto ){
$buttonControl.removeClass("action-start").removeClass("hover-stop").addClass("action-stop");
self.play( self.settings.interval,'next', true );
}
}
} );
That means, hover stop functionality is default there.