I want the animation to run before allowing clicking of the next button so the animation does not go out of sync. i don't know what would be better bind / unbind or something like a while not true loop.
function first_horizontal_slider() {
var $scroller = $('div#first_slider');
var counter = 0;
$('div#first_left_btn a').css({ 'background': 'url(img/left_arrow_bw.png) no-repeat' });
$('div#first_right_btn a').css({ 'background': 'url(img/right_arrow.png) no-repeat' });
$('div#first_left_btn a').click(function () {
if (counter != 0) {
$('div#first_right_btn a').css({ 'background': 'url(img/right_arrow.png) no-repeat' });
$scroller.stop().animate({
"left": "+=732px"
}, "slow");
counter--;
if (counter == 0) {
$('div#first_left_btn a').css({ 'background': 'url(img/left_arrow_bw.png) no-repeat' });
}
}
return false;
});
$('div#first_right_btn a').click(function () {
if (counter != 2) {
$('div#first_left_btn a').css({ 'background': 'url(img/left_arrow.png) no-repeat' });
$scroller.stop().animate({
"left": "-=732px"
}, "slow");
counter++;
if (counter == 2) {
$('div#first_right_btn a').css({ 'background': 'url(img/right_arrow_bw.png) no-repeat' });
}
}
return false;
});
}
If you used a button or input type="button" then you would be able to set .disabled to true before the animation, and back to false after.
on callback function of animate you can set button to enabled.
You could disable the button at the start of the animation and have a callback in the complete method of the animation to enable the button
//before animation starts
disableButton()
$scroller.stop().animate({
"left":"+=732px"
},"slow", 'swing', enableButton); //added default easing
function enableButton() {
$('#thebutton').removeAttr('disabled');
}
function disableButton() {
$('#thebutton').attr('disabled', 'disabled');
}
use jQuery end or check via jQuery animated
Related
I have used the following code which makes it every time you click on the div it will animate and move across the page, thus moving the next one across after it.
http://jsfiddle.net/jtbowden/ykbgT/2/
However, I am trying to make it so it automatically scrolls every 3 seconds without having to click. I have tried the following adjustments to the javascript using a timer but it seems to just spazz out and not scroll correctly:
<script>
$('.box').click(function () {
$(this).animate({
left: '-50%'
}, 500, function () {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$(this).next().animate({
left: '50%'
}, 500);
});
$(document).ready(function ()
{
setInterval(function ()
{
$('.box').click();
console.log("BOX CLICKED.");
}, 3000);
});
</script>
Does anyone have any ideas?
Thanks
Similar to Zack's answer(but simpler, IMHO), I've found that the following works for you
id = 1
setInterval(function(){
$('#box' + id).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$('#box' + id).next().animate({
left: '50%'
}, 500);
id = id <= 5 ? id + 1 : 1;
},4000)
Sorted it by using the following adjustments:
<script>
ActiveDashboards = {};
ActiveDashboards["Projects"] = true;
ActiveDashboards["SHEQs"] = false;
ActiveDashboards["HR"] = false;
function ShowNextDashboard()
{
if (ActiveDashboards["Projects"] == true)
{
//Hide this one.
$('#box1').animate({
left: '-50%'
}, 500, function () {
$('#box1').css('left', '150%');
$('#box1').appendTo('#container');
});
//Show SHEQs one.
$('#box2').animate({
left: '50%'
}, 500);
ActiveDashboards["Projects"] = false;
ActiveDashboards["SHEQs"] = true;
}
else if (ActiveDashboards["SHEQs"] == true)
{
//Hide this one.
$('#box2').animate({
left: '-50%'
}, 500, function () {
$('#box2').css('left', '150%');
$('#box2').appendTo('#container');
});
//Show HR one.
$('#box3').animate({
left: '50%'
}, 500);
ActiveDashboards["SHEQs"] = false;
ActiveDashboards["HR"] = true;
}
else if (ActiveDashboards["HR"] == true)
{
//Hide this one.
$('#box3').animate({
left: '-50%'
}, 500, function () {
$('#box3').css('left', '150%');
$('#box3').appendTo('#container');
});
//Show Projects one.
$('#box1').animate({
left: '50%'
}, 500);
ActiveDashboards["HR"] = false;
ActiveDashboards["Projects"] = true;
}
}
$(document).ready(function ()
{
setInterval(function ()
{
ShowNextDashboard();
}, 4000);
});
</script>
Probably a better way of doing it, but it's working fine and scrolling through each one.
I'm trying to create a feature where when you mouseover an object, another object begins to move continuously until you mouseout. For some reason in my code it stops after the first 10 pixels, which is this,
http://jsfiddle.net/JoshuaWaheed/7df29/
$("a").mouseover(function(){
$("div").animate({
"margin-left": "+=" + 10 + "px"
});
});
How can I make it run continuously, while on mouseover only?
Try to do a clever recursion here,
$("a").mouseover(function () {
stop = false;
animate()
});
$("a").mouseout(function () {
stop = true;
$("div").stop();
});
function animate() {
if (stop) { return; }
$("div").animate({
"margin-left": "+=" + 10 + "px"
}, animate);
}
DEMO
Don't use .animate, because it's not designed for this. You can move it yourself by altering the CSS in a setInterval loop:
$("a").mouseover(function () {
// store the interval ID on the DOM element itself
$(this).data('tc', setInterval(function () {
$("div").css({
"margin-left": "+=1"
});
}, 20) // milliseconds
);
});
$("a").mouseout(function () {
// clear the interval ID
clearInterval($(this).data('tc'));
});
http://jsfiddle.net/mblase75/5QJTT/
Try if this works :
var over = false;
$("a").mouseover(function(){
over = true;
while(over == true)
{
$("div").animate({
"margin-left": "+=" + 10 + "px"
});
}
});
$("a").mouseout(function(){
over = false;
});
I need to make my hover event, which executes a function, to stop running that function based on the condition of margin-top.
Here is my fiddle - http://jsfiddle.net/Joe_Foster/LwrVv/
$(document).ready(function(){
function moveUp(){
$('#a').animate({
"margin-top" : "-=" + 30},200, "linear", moveUp);
};
/* $('.up').hover(function(){
if ($m =='0px'){
alert('stop');
}
else{
moveUp();
}
});
*/
$('.up').hover(function(){
moveUp();
},
function(){
$('#a').stop();
});
//---------------------------------------
function moveDown(){
$('#a').animate({
"margin-top" : "+=" + 30},200, "linear", moveDown);
};
$('.down').hover(function(){
moveDown();
},
function(){
$('#a').stop();
});
});
Please help me before I burst more blood vessels in my eyes :)
Thank you.
I was just looking at your JS Fiddle and while I'm not certain of what values you wished to stop at, here is the code I used to make it work:
JS:
var upperThreshold = -607;
var lowerThreshold = 0;
function moveUp()
{
if ($("#a").css("marginTop").replace(/px/,'') <= upperThreshold)
{
console.log($("#a").css("marginTop"));
$('#a').stop();
return false;
}
else
{
$('#a').animate({"margin-top" : "-=" + 30},200, "linear", moveUp);
}
}
function moveDown()
{
if ($("#a").css("marginTop").replace(/px/,'') >= lowerThreshold)
{
console.log($("#a").css("marginTop"));
$('#a').stop();
return false;
}
else
{
$('#a').animate({"margin-top" : "+=" + 30},200, "linear", moveDown);
}
}
$(document).ready(function()
{
$('.down').hover(function()
{
moveDown();
},
function()
{
$('#a').stop();
}
);
$('.up').hover(function()
{
moveUp();
},
function()
{
$('#a').stop();
}
);
});
JSFiddle: http://jsfiddle.net/irishgeek82/ePdE5/
Please let me know if this works for you! :)
I currently am using the code below to make a div class .overlay fade in when hovering over a div...
It fades out when you're not hovering over it.
How could I also make it fade out if your pointer is stationary for "x" time?
<script>
$(document).ready(function() {
$(".img-holder").on("mouseenter", function(){
$(".overlay").stop(true, true).fadeIn();
});
$(".img-holder").on("mouseleave", function(){
$(".overlay").stop(true, true).fadeOut();
});
});
</script>
Updated with new requirements:
$(document).ready(function() {
var timer = 0,
idleThreshold = 1;
setInterval(function(){
if(timer > idleThreshold) {
$('.overlay').stop(true, true).fadeOut();
} else {
timer++; }
}, 1000);
$('.img-holder').on("mousemove", function(){
if(timer == 0) {
$(".overlay").stop(true, true).fadeIn();
}
timer = 0;
});
$(".img-holder").on("mouseenter", function(){
$(".overlay").stop(true, true).fadeIn();
});
$(".img-holder").on("mouseleave", function(){
$(".overlay").stop(true, true).fadeOut();
});
});
DEMO
try something like this:
setTimeout(function(){
$(".img-holder").fadeOut("slow");
}, 10000 );
You can do it like this too
var timer;
var x=3000; // in ms
$(document).on('mousemove', function () {
clearTimeout(timer);
timer = setTimeout(function () {
$(".overlay").stop(true, true).fadeOut();
}, x);
});
Please go to : http://gati.simptome-remedii.ro/ . As you can see there is a carousel effect in the header and it goes forward and backwards once you click on the arrows or press left/right key .
I need it to autoplay so I need an autosliding effect.
Time interval should be 5 seconds ( I guess I can set that up later ) .
This carousel effect uses jquery-1.3.1.min.js and slider.js .
Slider.js
$(function() {
var totalPanels = $(".scrollContainer").children().size();
var regWidth = $(".panel").css("width");
var regImgWidth = $(".panel img").css("width");
var regTitleSize = $(".panel h2").css("font-size");
var regParSize = $(".panel p").css("font-size");
var movingDistance = 300;
var curWidth = 350;
var curImgWidth = 220;
var curTitleSize = "15px";
var curParSize = "15px";
var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');
$panels.css({'float' : 'left','position' : 'relative'});
$("#slider").data("currentlyMoving", false);
$container
.css('width', ($panels[0].offsetWidth * $panels.length) + 100 )
.css('left', "-350px");
var scroll = $('#slider .scroll').css('overflow', 'hidden');
function returnToNormal(element) {
$(element)
.animate({ width: regWidth })
.find("img")
.animate({ width: regImgWidth })
.end()
.find("h2")
.animate({ fontSize: regTitleSize })
.end()
.find("p")
.animate({ fontSize: regParSize });
};
function growBigger(element) {
$(element)
.animate({ width: curWidth })
.find("img")
.animate({ width: curImgWidth })
.end()
.find("h2")
.animate({ fontSize: curTitleSize })
.end()
.find("p")
.animate({ fontSize: curParSize });
}
//direction true = right, false = left
function change(direction) {
//if not at the first or last panel
if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; }
//if not currently moving
if (($("#slider").data("currentlyMoving") == false)) {
$("#slider").data("currentlyMoving", true);
var next = direction ? curPanel + 1 : curPanel - 1;
var leftValue = $(".scrollContainer").css("left");
var movement = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
$(".scrollContainer")
.stop()
.animate({
"left": movement
}, function() {
$("#slider").data("currentlyMoving", false);
});
returnToNormal("#panel_"+curPanel);
growBigger("#panel_"+next);
curPanel = next;
//remove all previous bound functions
$("#panel_"+(curPanel+1)).unbind();
//go forward
$("#panel_"+(curPanel+1)).click(function(){ change(true); });
//remove all previous bound functions
$("#panel_"+(curPanel-1)).unbind();
//go back
$("#panel_"+(curPanel-1)).click(function(){ change(false); });
//remove all previous bound functions
$("#panel_"+curPanel).unbind();
}
}
// Set up "Current" panel and next and prev
growBigger("#panel_3");
var curPanel = 3;
$("#panel_"+(curPanel+1)).click(function(){ change(true); });
$("#panel_"+(curPanel-1)).click(function(){ change(false); });
//when the left/right arrows are clicked
$(".right").click(function(){ change(true); });
$(".left").click(function(){ change(false); });
$(window).keydown(function(event){
switch (event.keyCode) {
case 13: //enter
$(".right").click();
break;
case 32: //space
$(".right").click();
break;
case 37: //left arrow
$(".left").click();
break;
case 39: //right arrow
$(".right").click();
break;
}
});
}
);
I am really looking forward to receiving an answer.
Thank you !
Regards,
Razvan.
The simple thing would be to do
setInterval( function() {$('.right').click();}, 5000 );
This will call click the right button every 5 seconds..
But you will need to add some logic if you want it to go both left and right ..
update
Try this (put it right before the $(window).keydown line ..)
setInterval( function(){
if (curPanel == totalPanels)
{
curPanel = 1;
$("#slider").data("currentlyMoving", true);
$(".scrollContainer")
.stop()
.animate({
"left": movingDistance
}, function() {
$("#slider").data("currentlyMoving", false);
});
returnToNormal("#panel_"+totalPanels);
growBigger("#panel_1");
}
else
{
$('.right').click();
}
} ,5000 );