Jquery animate help!
Hi! I'm really new in this amazing jquery (I'm graphic designer) and I really need HELP! with this:
I'm trying to use a simple left - right scroll with a simple buttons left-right to move a wide image( in this sample my image have width: 5599px height: 440px) inside a bootstrap model so far after days and days of searching I do the script above, now I'm felling I'll lose my last hair trying this working
so, this are the facts:
1- My scroll bar was made with css because (I don't know why the standard scroll if I'm not using desapear) if I use works great, but doesn't get syncronized with the buttons I did to also move the image (design request)
2- my left and right buttons work fine if (except for the sync with the scroll bar) I go straight to the end of the image and return exactly to the start
Now my mayors problems are:
1- when I use the buttons the scroll bar doesn't seems sincronized with where the image wide goes in the animation (scrolling)
2- If I use mouseleave and start again to move to the end of the image, the script loose the point where the image was and looks to start from 0 and move more of the end point to dessapear the image
3- I have 6 different images in differents modal, how can I use a single script for all image (all image have differents width, the same height and all are responsive)
My firts jquery script ever:
f-izquierda = left button
f-derecha = right buttom
#dgoyo the name of the image
$(document).ready(function() {
$("#f-izquierda").mouseenter(function loop(){
if ( parseInt($("#dgoyo").css('margin-left')) < 0 )
$("#dgoyo").animate({"margin-left": "+=2"}, 10,"linear", loop);
return false; // prevent default click action from happening!
});
$("#f-izquierda").mouseleave(function(){
$("#dgoyo").stop();
return false; // prevent default click action from happening!
});
$("#f-derecha").mouseenter(function loop(){
if ( parseInt($("#dgoyo").css('margin-left')) > -4399 )
$("#dgoyo").animate({"margin-left": "-=4399"}, 20000,"linear", loop);
return false; // prevent default click action from happening!
});
$("#f-derecha").mouseleave(function(){
$("#dgoyo").stop();
return false; // prevent default click action from happening!
});
});
Please anyone can help me?
I'm really triying to use a simple scroll with the left - right arrow will place in some custom place instead of the boring, usual position.
THANKS!!!!!!
I'm trying to use a simple left - right scroll with a simple buttons left-right to move a wide image( in this sample my image have width: 5599px height: 440px) inside a bootstrap model so far after days and days of searching I do the script above, now I'm felling I'll lose my last hair trying this working
so, this are the facts:
1- My scroll bar was made with css because (I don't know why the standard scroll if I'm not using desapear) if I use works great, but doesn't get syncronized with the buttons I did to also move the image (design request)
2- my left and right buttons work fine if (except for the sync with the scroll bar) I go straight to the end of the image and return exactly to the start
Now my mayors problems are:
1- when I use the buttons the scroll bar doesn't seems sincronized with where the image wide goes in the animation (scrolling)
2- If I use mouseleave and start again to move to the end of the image, the script loose the point where the image was and looks to start from 0 and move more of the end point to dessapear the image
3- I have 6 different images in differents modal, how can I use a single script for all image (all image have differents width, the same height and all are responsive)
My firts jquery script ever:
f-izquierda = left button
f-derecha = right buttom
#dgoyo the name of the image
$(document).ready(function() {
$("#f-izquierda").mouseenter(function loop(){
if ( parseInt($("#dgoyo").css('margin-left')) < 0 )
$("#dgoyo").animate({"margin-left": "+=2"}, 10,"linear", loop);
return false; // prevent default click action from happening!
});
$("#f-izquierda").mouseleave(function(){
$("#dgoyo").stop();
return false; // prevent default click action from happening!
});
$("#f-derecha").mouseenter(function loop(){
if ( parseInt($("#dgoyo").css('margin-left')) > -4399 )
$("#dgoyo").animate({"margin-left": "-=4399"}, 20000,"linear", loop);
return false; // prevent default click action from happening!
});
$("#f-derecha").mouseleave(function(){
$("#dgoyo").stop();
return false; // prevent default click action from happening!
});
});
Please anyone can help me?
I'm really triying to use a simple scroll with the left - right arrow will place in some custom place instead of the boring, usual position.
THANKS!!!!!!
Topic Participants
joffrecastejon
jakecigar