The code is set to on the start slide forward and after 500 its suppose slide back. Well the code does slide forward but the code does not slide back after the 500. The code is not written properly as it should slide back. Here is the code JSFiddle:
$("#slideout").animate({right:'0px'}, {queue: false, duration: "slow"}, function () {
timer = setTimeout(function () {
$("#slideout").animate({right:'-280px'}, {queue: false, duration: 500})
}, 500);
});
http://jsfiddle.net/wdvUQ/2/
If anybody can fix it up so that the code can slide back would be awesome.
Your issue is with the animate arguments
$("#slideout").animate({right:'0px'}, {queue: false, duration: "slow"}, function ()...
should be
$("#slideout").animate({right:'0px' , queue: false, duration: "slow"}, function ()...
You'll need to remove the closing/opening curly braces.
Related
I have recently implemented the counter shown in this jsfiddle: https://jsfiddle.net/Behseini/osqzL4ob/
HTML
<div id="users">Counter: <b counter="0">0</b></div>
JS
function update_users_count() {
$('#users b').animate({
counter: 260
}, {
duration: 6000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
},
complete: update_users_count
});
};
update_users_count();
In the element inspector it looks as if the script would continue to loop after execution (the value is highlighted and keeps refreshing). Is there a way to stop this from happening?
Sure, just remove the complete: update_users_count (what it does is: recursively looping the same function on "complete", although the value stays the same in its final state count).
jsFiddle demo
this is my first post on stackoverflow, so please let me know if I've asked my question correctly, and if my terminology is incorrect at any point. Thank you.
I'm using jQuery and the Cycle plugin. I have about 18 images that rotate with no delay. You can view a working example of this here: (http://dev.ctsciencecenter.org/freeze-frame/).
I'm attempting to change the 'speed' value, eventually with a jQuery UI slider, but for now with a link and the .click function.
Here is the Cycle function:
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast'
});
I would like to change the 'speed' value to 'slow' when a link with the id #example is clicked.
I really appreciate the help, could you please also tell me the term for properties like 'speed' and 'fx', are these called 'Object Properties?".
Let me know if this is what you are looking for:
$(function () {
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast'
});
$('#example').click(function (e) {
e.preventDefault();
$('#slideshow').unbind();
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'slow'
});
});
});
I've got this script that I have been working on and I need it to fade in and move up by it's height. If I remove the .animate() it fades in so i'm guessing theres something wrong there.
function showDesc (){
$(".container-box").hover(function(){
$(this).find(".contain-desc").fadeIn('slow').animate({
'bottom':'130px'
}, {duration: 'slow', queue: false;}
},function(){
$(this).find(".contain-desc").fadeOut();
});
}
I do have to use the old fashioned way of onmouseover="" in the html and below is my complete code so far, thanks.
http://jsfiddle.net/silverlight513/KuJkY/
The error is here:
{duration: 'slow', queue: false;}
You have terminated the statement with a semi-colon(;)
Change it to:
{duration: 'slow', queue: false}
EDIT:
There were a couple more errors in your code. I have updated the function:
function showDesc (){
$(".container-box").hover(function(){
$(this).find(".contain-desc").fadeIn('slow').animate({
'bottom':'130px'
}, {duration: 'slow', queue: false});//This was not closed
},function(){
$(this).find(".contain-desc").fadeOut();
});
}
Good morning all :) I've got an issue here, which is pain in my neck for 2 days already. I'm using bxSlider for images to slide on a page and I'm calling my own function in onAfterSlide callback. Everything works fine except one thing. When I quickly switching between slides my function is being called 2-3 times(I have 3 images on page), which is not good as it returns unexpected results. I can not use newest version of bxSlider, because the markup has been changed. I think this happens, because the animation is still not finished when the onAfterSlide callback is called.
This is how I call bxSlider:
$('#slider_bx').bxSlider({
mode: 'fade',
speed: 1000,
pause: 9000,
auto: true,
autoControls: false,
prevText: '',
nextText: '',
autoHover: true,
captions: false,
pager: true,
onBeforeSlide: function () {
if ($('.slide_in').length) {
$('.slide_in').hide();
}
},
onAfterSlide: function () {
if ($('.slide_in').length && $('.slide_in').is(':hidden')) {
doCrazyStuff();
}
}
});
And this is my function:
function doCrazyStuff() {
var $this = $('.slide_in');
if ($this.length > 0) {
setTimeout(function () {
$this.show();
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
}, 3000);
}
}
Any help appreciated. Thanks.
EDIT:
I've tried to add .stop(), but didn't helped.
$this.show().stop();
$this.stop().show();
$this.stop().rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
}).stop(); // throws an error
You can cancel a timeout or make a check to see if it's running.
If you want only the last timeout to run:
var crazyTimeout;
function doCrazyStuff() {
var $this = $('.slide_in');
if ($this.length > 0) {
if (crazyTimeout != undefined) {
clearTimeout(crazyTimeout); // Cancel previous timeout
}
crazyTimeout = setTimeout(function () {
crazyTimeout = undefined;
$this.show();
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
}, 3000);
}
}
If you want only the first timeout to run:
var crazyTimeout;
function doCrazyStuff() {
var $this = $('.slide_in');
if ($this.length > 0) {
if (crazyTimeout != undefined) {
return; // A timeout is still running: don't create new one
}
crazyTimeout = setTimeout(function () {
crazyTimeout = undefined;
$this.show();
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
}, 3000);
}
}
Try using the
$('.slide_in').stop()
in after slide function I hope it works, if possible try to give code in fiddle it will be easy to help.
Viewing your code I think the problem is not with your code : but as you have set auto to true so the plugin timer is not stopped and is sliding the images in its regular interval.
so I hope the use of stopAuto() bxSlider function in your custom function will solve the problem. and don't forget to start the auto show after you have finished doing your stuff.
thanks
Everything works just fine, but when I remove
{queue:false, duration: 800, easing: 'easeInOutQuart'}
from
$(".chapters_list").slideDown(
with a 500, it stops working. So if I don't want easing in my script, it will work fine, when I insert easing into the top function, like is shown below, it stops working. Why wont it allow me to have easing?
$('.article_book_title').click(function () {
if ($(".chapters_list").is(":hidden")) {
$(".chapters_list").slideDown({queue:false, duration: 800, easing: 'easeInOutQuart'}, function () {
doSlide($('UL.chapters_list li:first'))
});
} else {
$(".chapters_list").slideUp({queue:false, duration: 800, easing: 'easeInOutQuart'});
}
});
function doSlide(current) {
$(current).animate({
backgroundColor:'#d6f4aa', color:'#eee'
},40, function() {
$(this).animate({backgroundColor:'#252525', color:'#fff'}, 500)
doSlide($(current).next('li'));
});
}
The shortcut methods like slideUp dont take an object config as an argument.. they take the duration and the call back. If you want more advance options you have to use the animate method.
slideUp API