Need help changing the speed duration of slides with Jquery scripts - javascript

So first off I have basically no working knowledge of javascript or Jquery. Second off I have tried to look up answers to this and tried a few things but nothing worked for me.
My slides seem to change every 6 or 7 seconds. I want to make each slide last longer. Maybe about 12 seconds before changing. I have tried changing the speed and timeout values and adding mouse overs for a pause feature but nothing has worked.
This is the code built into the web template. Top half looks to be for admin editing, while bottom is the general page view. Any help with this is greatly appreciated.
jQuery.noConflict();
jQuery(document).ready(function($){
// Checks for Admin to apply fixes for backend
if ( $('#adminbar #toolbar').length ) {
$('#features').cycle({
fx: 'scrollRight',
speed: 100,
next: '#next',
prev: '#prev',
timeout: 0
});
$("#controls").show();
$("ul#featuredNav").css({
'margin-top': '-38px'
});
$("ul#featuredNav li").css({
'margin': '-20px 0 90px',
'padding': '0 0 0 20px'
});
$("#featuredWrapper").css({
'margin': '0 0 80px'
});
}
else {
$('#features').cycle({
fx: 'scrollRight',
pager: '#featuredNav',
speed: 500,
timeout: 6000,
pagerAnchorBuilder: function(idx, slide) {
// return selector string for existing anchor
return '#featuredNav li:eq(' + idx + ')';
},
updateActivePagerLink: function(pager, currSlideIndex) {
$(pager).find('li').removeClass('activeTab')
.filter('li:eq('+currSlideIndex+')').addClass('activeTab');
}
});
$("#controls").hide();
}
});

Change
timeout: 6000,
to
timeout: 12000,
then clear your browser and site caches.

Related

How can I change the speed (duration) of an anime.js event using a slider?

I am using anime.js to animate an element that is being bounced back in forth from the edges of its container. I want to be able to adjust the speed of this animation using a range slider that I have elsewhere on the page.
My problem is that while the duration is adjusted, it appears that the slider instantiates completely and does not continue animating to where it originally was suppposed to. I want it to go from the far left to the far right, but when I resize it the animation will only go from the place where it was resized to the end of the container.
These have been my attempts when calling the onchange method of my slider.
function adjustSpeed() {
alternate.duration = 300;
}
and
function adjustSpeed() {
var alternate = anime({
targets: '#alternate .el',
translateX: width,
direction: 'alternate',
loop: true,
duration: 300,
easing: 'linear',
});
}
Any help would be very much appreciated.
I just came across this issue and I've found a better yet not perfect solution. AnimeJS has another static speed property that is by default set to 1. If you change this speed, the animation speed changes, though the animation "jumps" and it doesn't look smooth.
For example, if you want the speed to be 0.5x the original speed, set anime.speed = 0.5.
I'll update this answer if I come up with a better solution.
When you changed speed or duration, you have to stop and remove current animation. After that, you have to start new animation with new duration value.
Here is example of bouncing from left to right element.
var duration = 500
const animateBLS = () => {
const el = document.getElementById('dot')
anime.remove(el)
animation = anime({
targets: [el],
left: '100%',
direction: 'alternate',
loop: true,
easing: 'linear',
duration: duration
});
}
And there is the code for running new animations, called when durations is changed. It's finish current animation with new speed value, and start our main animation functions "animateBLS"
const el = document.getElementById('dot')
if(animation.reversed) {
anime.remove(el)
animation = anime({
targets: [el],
left: '0%',
direction: 'normal',
loop: false,
easing: 'linear',
duration: duration,
complete: () => {
animateBLS()
}
});
} else {
anime.remove(el)
animation = anime({
targets: [el],
left: '100%',
direction: 'normal',
loop: false,
easing: 'linear',
duration: duration,
complete: () => {
animation = anime({
targets: [el],
left: '0%',
direction: 'normal',
loop: false,
easing: 'linear',
duration: duration,
complete: () => {
animateBLS()
}
});
}
});
}
A dirty solution:
Manage frame manually by anime.tick combining with requestAnimationFrame, here're the demo:
https://codesandbox.io/s/anime-js-speed-adjustment-lm0ui?file=/src/index.js
The code is basically self-explained, if you have any further question, let me know.

how to use scrollIt.js in different pages with different topOffset?

This is a nice jQuery plugin that i use for my site.
scrollIt.js
In the option section:
$.scrollIt({
upKey: 38, // key code to navigate to the next section
downKey: 40, // key code to navigate to the previous section
easing: 'linear', // the easing function for animation
scrollTime: 600, // how long (in ms) the animation takes
activeClass: 'active', // class given to the active nav element
onPageChange: null, // function(pageIndex) that is called when page is changed
topOffset: 0 // offste (in px) for fixed top navigation
});
I set the "topOffset" to "-160", and it works fine. Now on the other page i'm calling the same function but now I want the "topOffset" to be "0". How would i achieve that please?
Solve the problem myself by doing this:
if( $(".main-body").hasClass("home-vertical-scroll") ){
var scrollItTopOffset = 0;
}
else{
var scrollItTopOffset = -160;
};
$(function(){
$.scrollIt({
upKey: 38,
downKey: 40,
easing: 'linear',
scrollTime: 600,
onPageChange: null,
topOffset: scrollItTopOffset
});
});
In case someone want the answer.

Display Different Image On Load/Refresh

I'm currently using Jquery Cycle plugin for my project and the slideshow is running smoothly. However, I want my slide to display or start with a different image on every page refresh. I'm not sure how to add a function/script to achieve that or if it's possible. I'm new to JQuery so any help would greatly be appreciated!
Script:
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
speed: 2500,
timeout: 7000,
prev: '#prev',
next: '#next',
});
});
My HTML:
<div class="slideshow">
<img src="images/img_slide-1.jpg" />
<img src="images/img_slide-2.jpg" />
<img src="images/img_slide-3.jpg" />
</div>
Use the startingslide option
startingSlide: 0, // zero-based index of the first slide to be displayed
To pick a random slide you need to get a random index like this
var rand = Math.floor(Math.random() * $('.slideshow img').length);
Then, when you initiliaze the cycle, use the rand variable as the startingslide.
$(document).ready(function() {
var rand = Math.floor(Math.random() * $('.slideshow img').length);
$('.slideshow').cycle({
fx: 'fade',
speed: 2500,
timeout: 7000,
prev: '#prev',
next: '#next',
startingSlide: rand
});
});
Doing some quick research on this plugin (I have never used it before), it looks like there is a random option that you can specify as true. Take a look in the docs: http://jquery.malsup.com/cycle/options.html (just ctrl-f for "random").
If you were looking from just a random first picture, then sequential slides after (as stated in the comments), just use startingSlide: SLIDE_NUMBER_HERE, and it should work, based on minimal research on the docs.

jquery menu slides in and bounces

http://jsfiddle.net/E6cUF/
The idea is that after the page finished loading the grey box slides left from behind the green box, if possible bounce a little.
Edit: made a new version based on changes people made to the jsfiddle and the comment from Nicola
http://jsfiddle.net/RBD3K/
However the grey one should be behind the green one and slide from right to left so it appears
To have it bounce you are missing two things i think:
1) you need to load jquery UI.
2) put the bounce effect after the animate effect:
$('#test').click(function() {
var $marginLefty = $('.left');
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() :
0
}).effect("bounce", { times:5 }, 300);
});
updated fiddle: http://jsfiddle.net/nicolapeluchetti/E6cUF/4/
Try this . Not sure if this is what you want.
$('#test').click(function() {
var $marginLefty = $('.left');
var $marginRight = $('.right');
$marginLefty.animate({
marginLeft: 0
},{ duration: 200, queue: false });
$marginRight.animate({
marginLeft: 100
},{ duration: 200, queue: false });
});
Update: from your updated fiddle,add for .right position :absolute;z-index:1000 as css
http://jsfiddle.net/E6cUF/11/

fadeOut() and slideUp() at the same time?

I have found jQuery: FadeOut then SlideUp and it's good, but it's not the one.
How can I fadeOut() and slideUp() at the same time? I tried two separate setTimeout() calls with the same delay but the slideUp() happened as soon as the page loaded.
Has anyone done this?
You can do something like this, this is a full toggle version:
$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
For strictly a fadeout:
$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow');
Directly animating height results in a jerky motion on some web pages. However, combining a CSS transition with jQuery's slideUp() makes for a smooth disappearing act.
const slideFade = (elem) => {
const fade = { opacity: 0, transition: 'opacity 400ms' };
elem.css(fade).slideUp();
};
slideFade($('#mySelector'));
Fiddle with the code:
https://jsfiddle.net/00Lodcqf/435
In some situations, a very quick 100 millisecond pause to allow more fading creates a slightly smoother experience:
elem.css(fade).delay(100).slideUp();
This is the solution I used in the dna.js project where you can view the code (github.com/dnajs/dna.js) for the dna.ui.slideFade() function to see additional support for toggling and callbacks.
The accepted answer by "Nick Craver" is definitely the way to go. The only thing I'd add is that his answer doesn't actually "hide" it, meaning the DOM still sees it as a viable element to display.
This can be a problem if you have margin's or padding's on the 'slid' element... they will still show. So I just added a callback to the animate() function to actually hide it after animation is complete:
$("#mySelector").animate({
height: 0,
opacity: 0,
margin: 0,
padding: 0
}, 'slow', function(){
$(this).hide();
});
It's possible to do this with the slideUp and fadeOut methods themselves like so:
$('#mydiv').slideUp(300, function(){
console.log('Done!');
}).fadeOut({
duration: 300,
queue: false
});
I had a similar problem and fixed it like this.
$('#mydiv').animate({
height: 0,
}, {
duration: 1000,
complete: function(){$('#mydiv').css('display', 'none');}
});
$('#mydiv').animate({
opacity: 0,
}, {
duration: 1000,
queue: false
});
the queue property tells it whether to queue the animation or just play it right away
Throwing one more refinement in there based on #CodeKoalas. It accounts for vertical margin and padding but not horizontal.
$('.selector').animate({
opacity: 0,
height: 0,
marginTop: 0,
marginBottom: 0,
paddingTop: 0,
paddingBottom: 0
}, 'slow', function() {
$(this).hide();
});

Categories