When I apply the following code it sets the correct bar value but doesnt do any easing?
$("#myBar").progressbar({ value: 25, speed: 1500, easing: 'easeOutBounce'});
What am I missing, any help appreciated!
Thanks
Solution:
I kinda worked it out myself
$("#myBar").progressbar({ value: 25, speed: 1500, easing: 'easeOutBounce'});
was indeed invalid code (thanks Orenet!), using:
$('#myBar div').stop().animate({width: val + '%'},1000, 'easeOutBounce');
didn't work immediately as the div with the actual bar was hidden even initializing it before didnt work. At the moment i am just unhide it. any better solution?
I don't think you can use speed or easing with the default progressbar of jquery.
please read the progressbar documentation.
Solution:
I kinda worked it out myself
$("#myBar").progressbar({ value: 25, speed: 1500, easing: 'easeOutBounce'});
was indeed invalid code (thanks Orenet!), using:
$('#myBar div').stop().animate({width: val + '%'},1000, 'easeOutBounce');
didn't work immediately as the div with the actual bar was hidden even initializing it before didnt work. At the moment i am just unhide it. any better solution?
Related
https://waveoptiks.com/
jQuery('.homepage_slider').bxSlider(
{
minSlides: 1,
maxSlides: 4,
slideWidth: 200,
slideMargin: 30,
shrinkItems: true,
ticker: true,
speed: 50000,
easing: 'ease-in',
tickerHover: 1,
adaptiveHeight: 1,
}
);
When the slider has a lot of list items, it is extremely fast, but when you remove items, it gets slower. If seems like the slider cycle is trying to get through the entire list in a set amount of time and will speed up the slider to do so. Am I missing a setting, or is there a conflict with another plugin?
I have no idea whether you've found a good workaround, but your comment on it 'seems like the slider cycle is trying to get through the entire list in a set amount of time' gave me some insight into how to solve this problem for my bxslider.
In the bxSlider v.4.2.12, there is a function in the jquery.bxslider.js used to set the tickerLoop variable. Instead of:
var tickerLoop = function(resumeSpeed) {
var speed = resumeSpeed ? resumeSpeed : slider.settings.speed,
I changed it to:
var tickerLoop = function(resumeSpeed) {
var speed = resumeSpeed ? resumeSpeed : slider.settings.speed * slider.children.length,
I had to adjust the speed on my bxslider, but the change allows the slider to ticker at a consistent rate.
I'm trying to get Flexslider to work on the following page — http://www.mattpealing.co.uk/_concept/fddds/dev/ — but I can't get it to animate properly for the life of me.
It seems to be loading all the js and css scripts properly, and I can see the inline styles have been applied to the elements in the DOM.
It's just getting the thing to actually move is the problem I'm having. Here is my script:
$('#feed-testimonials-home .feed').flexslider({
animation: 'slideLeft',
slideshow: 0,
slideshowSpeed: 150,
animationSpeed: 500,
keyboard: 0
});
Can anyone see what I'm doing wrong?
Figured it out in the end — slideshow: 1
I'm new to js and web dev in general, and i want to add animations to my website using raphael js.
Here is the code I use for a basic slide-in animation:
paper.text('1000','25%','this is a\ntest').animate({x: '50'}, 1000, 'linear');
(test it here)
It works fine when i put fixed values for the x parameter. However, when i use dynamic positioning, the animation doesn't occur, and the text waits for the duration of the animation before positioning itself. At least the final positioning is what i'm looking for:
paper.text('300%','25%','this is a\ntest').animate({x: '50%'}, 1000, 'linear');
Why isn't it working ?
Is there a way around ?
I'm not sure raph can work like that (animating to a percentage), I may be wrong though.
Is this the sort of thing you are after ?
paper.text( paper.width * 3,'25%','this is a\ntest').animate({x: paper.width / 2}, 1000, 'linear');
How to rewrite this code, so it would fly in with easing not just fade in.
Code -
jQuery('#swiftslider-slide-'+newSlide).addClass('active').fadeIn('300');
Could you give me a full example? I understand I must use .animate() but if I do like this -
jQuery('#swiftslider-slide-'+newSlide).addClass('active').animate({opacity: "show"}, { duration: "slow", easing: "easein" });;
it doesn't work.
Hope you will be able to help me.
Thanks, Sparky672.
It's not working because, by default, there's no such thing as easein
in jQuery. Without using your own function or plugin, the only two
default jQuery animation easing options are swing and linear. See this
question to learn more about easing functions.
so I have a little issue with my jQuery Captify (Caption on image rollovers) and Quicksand (Image filtering system) not working so well together. When the page loads, my Captify works well when I roll my mouse over the images, however as soon as I click a link to filter my thumbnails, the captify script stops working.
I tried to call the captify script every x seconds, but I'm either not doing it correctly or it's just not the right solution. Can anyone help me out? The site can be found at http://www.galaxyturbo.net/new/index.php
If you have Firebug or similar developer tools like in Google Chrome, you can take a look at my code from there, I just didn't want to perhaps spam this page. Thanks SO much in advance if you can help me out here, I'm really desperate.
Well, I would say we both need to learn more JavaScript, but I had the same problem, and here is how you make it work :
What you need to do is RECALL THE CAPTIFY FUNCTION AFTER THE QUICKSAND CLONNING !
so look for the JS code for quicksand, look for :
$holder.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad'
});
return false;
that should look like this :
$holder.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad'
},
// RECALL CAPTIFY ===============================
function() { $('img.captify').captify({
speedOver: 'fast',
speedOut: 'normal',
hideDelay: 500,
animation: 'slide',
prefix: '',
opacity: '0.7',
className: 'caption-bottom',
position: 'bottom',
spanWidth: '100%'
});
}
// RECALL CAPTIFY ==============================
);
return false;
hope that helps !
also, you will have to do the same with other scripts, like LightBox or PrettyPhoto .