Response title
This is preview!
Move this topic
jQuery animate() method is not working with the array elements.
in Using jQuery
•
10 years ago
I'm trying to use animate method on array elements, yet it is not working. Those array elements are storing the images and I need to redefine the margin for all of them.
This is a task that I've to perform to form a image gallery slider.
Please help!
1
Replies(6)
Can you share your code?
You are better off with a jQuery of elements than an Array of elements.
JΛ̊KE
JΛ̊KE
Leave a comment on jakecigar's reply
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>The Playing Images</title>
<script src="jquery-1.8.0.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="main">
<div><h1>My Gallery Viewer</h1></div>
<div id="navigation">
<button id="bt1" value="prev">Previous</button>
<button id="bt2" value="next">Next</button>
</div>
<div class="slidingimg">
<ul>
<li><img src="img/1.jpg" alt="image"></li>
<li><img src="img/2.jpg" alt="image"></li>
<li><img src="img/3.jpg" alt="image"></li>
<li><img src="img/4.jpg" alt="image"></li>
<li><img src="img/5.jpg" alt="image"></li>
</ul>
</div>
<div id="anchors">
<ul id="aul">
<li class="s" id="1">1</li>
<li class="n" id="2">2</li>
<li class="n" id="3" >3</li>
<li class="n" id="4">4</li>
<li class="n" id="5">5</li>
</ul>
</div>
</div>
<script>
$(window).load(function()
{
var list = $('div.slidingimg').children('ul'),
anchorli= $('div.slidingimg li'),
imgs = list.find('img'),
imgW = imgs[0].width,
imgsL = imgs.length,
tImgsW = imgsL * imgW;
$('#navigation').find('button').on('click', function()
{
var dir = $(this).val();
if (dir==='next')
{
list.each(function(i)
{
if(imgs[imgsL-1].marginLeft === 0)
{
imgs[0].animate({'marginLeft': '0'}, 500);
imgs[0].siblings().animate({'marginLeft': 'marginLeft' + (tImgsW- imgW)}, 500);
console.log(imgs[0].marginLeft);
}
else
{
imgs.animate({'marginLeft': imgs.marginLeft-imgW});
}
})
console.log('Next Pressed');
}
else
{
list.each(function(i)
{
if(imgs[0].marginLeft === 0)
{
imgs[imgsL-1].animate({'margin-left': '0'});
imgs[0].siblings().animate({'marginLeft' : 'marginLeft'-tImgsW - imgW}, 500);
console.log(imgs[imgsL-1].width);
}
else
{
imgs.animate({'marginLeft' : imgs.marginLeft+imgW});
console.log(imgs[0].marginLeft);
}
})
console.log('Previous Pressed');
}
});
anchorli.on('click',function()
{
var $this=$(this),
id=$this.attr('id'),
margin= (id-1) * imgW;
list.animate({marginLeft:'-'+margin});
$this.removeClass('n').addClass('s');
$this.siblings().removeClass('s');
$this.siblings().addClass('n');
});
});
</script>
</body>
</html>
Leave a comment on Gaurav Nawal's reply
You need to convert an element into a jQuery of that element before you can call animate.
JΛ̊KE
$(imgs[0]).animate
Same for .siblings!
Thanks Jake, but it is not helping yet, it is all the more producing errors that were not there at first place.
Leave a comment on jakecigar's reply
It is still not working rather this is producing error.
Leave a comment on Gaurav Nawal's reply
You are not properly getting marginLeft, or doing animate.
JΛ̊KE
Use this helper function to get marginLeft
- function ml(el){
- return parseFloat( $(el).css('marginLeft') )
- }
.animate() – jQuery API works on a jQuery, not an element.
- animate({'marginLeft' : 'marginLeft'-tImgsW - imgW}, 500);
doesn’t make sense, what do you want it to do?
- animate({'marginLeft' : '-=' + (tImgsW - imgW) }, 500); // a relative animate
?
JΛ̊KE
Leave a comment on jakecigar's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Gaurav Nawal's question