I have a slide show that cycles through images, and then above those images I have some text and then two images. What I am wanting to is work out which images I am trying to animate and do so, however I want to have a delay between each animation.
My difficulty is that I have 3 slides, and each slide can have 2 images that need to be animated seperatly to the background, the slides are arranged are arranged based around the users preferences so from a front end point of view, I can never be 100% sure what two images will be grouped together, for that reason, I have written the following,
if($(".current .iphone").length) {
$(".current .iphone").animate({
opacity : 1,
left : "840px"
}, 800);
}
if($(".current .blackberry").length) {
$(".current .blackberry").animate({
opacity : 1,
left : "1119px"
}, 800);
}
if($(".current .samsung").length) {
$(".current .samsung").animate({
opacity : 1,
left : "783px"
}, 800);
}
if($(".current .htc").length) {
$(".current .htc").animate({
opacity : 1,
left : "900px"
}, 800);
}
if($(".current .nokia").length) {
$(".current .nokia").animate({
opacity : 1,
left : "823px"
}, 800);
}
if($(".current .nokia").length) {
$(".current .nokia").animate({
opacity : 1,
left : "823px"
}, 800);
}
And here is my HTML,
<div id="slideshow" role="main" style="position: relative; overflow: hidden; ">
<section data-background="_/images/elements/parralex-1.jpg">
<img src="_/images/iphone-blue.png" alt="iPhone mybunjee" class="iphone foreground phone" />
<img src="_/images/blackberry-pink.png" alt="Blackberry mybunjee" class="blackberry background phone" />
</section>
<section data-background="http://www.samtordoffracing.com/wp-content/uploads/2012/07/Tordoff-14.jpg">
<img src="_/images/iphone-blue.png" alt="iPhone mybunjee" class="iphone foreground phone" />
<img src="_/images/blackberry-pink.png" alt="Blackberry mybunjee" class="blackberry background phone" />
</section>
<section data-background="http://www.samtordoffracing.com/wp-content/uploads/2012/07/Tordoff-14.jpg">
<div class="samsung foreground"></div>
<div class="nokia foreground"></div>
</section>
</div>
Basically what I am doing is trying to work out which images are present in the current slide, and then animate then, however currently both images animate at the same time, and I want to have a random delay between one image being animated and then the next.
Is there a better way to do what I am doing?
You could try something like:
$.each($('#slideshow').find('img'), function(i, img){
if($(img).hasClass('iphone')){
setTimeout(
function(){
$(img).animate({
opacity : .5,
'margin-left' : "+=40px"
}, 800)
}, Math.random() * i *800);
}
if($(img).hasClass('blackberry')){
setTimeout(
function(){
$(img).animate({
opacity : .5
'margin-left' : "-=40px"
}, 800)
}, Math.random() * i *800);
}
});
Anyway here there are some example, look THIS for example.
I coundn't fully understand what are you trying to do but i changed your jQuery structure.
You need to define a trrigger/event for this action, like hover(), or click()
use this for less code:
$('.current').hover(function() {//mouse over event
var currentClass = $(this).children().attr('class');//takes mouse overed element's chlid's class
if($('.current .'+currentClass).length) {
$(".current ."currentClass).animate({
'opacity' : '1',
'left' : '840px'
}, 800);
}
});
if you dont want to define trigger events, you can use each() method with setInterval() for timed animation.
Related
I'm building a Slider but animating marginLeft does not work and i can't figure out why.
A Fade with Opacity doesn't work also.
$currentSlide.find('.content').animate({
marginLeft: '-100%',
opacity: 0
}, speed);
setTimeout(function() {
$currentSlide.removeClass('active');
$nextSlide.addClass('active');
$nextSlide.find('.content').animate({
marginLeft: '0%',
opacity: 1
}, speed);
}, speed);
Here you can see two Slides ( $currentSlide and $nextSlide ) where the first Slide should fade out with animating marginLeft to -100% and a second Slide that sould do that vice versa.
[edit] for sliding click on the white bars
Example: https://codepen.io/anon/pen/dpNRqQ
[edit]: the example is from me that doesn't but should work!
failure found:
change
$currentSlide.find('.content').animate
to
$currentSlide.find('.slide-content').animate
I am trying to make div disappear and reappear by have the text disappear, the div collapsing, then the opposite with another div, using JQuery animate function but something's not working in the following code:
$(currentTab + " > p").animate({ opacity: 0},{
duration: 500,
complete: function(){
$(currentTab).animate({width: "0", opacity: 0}, {
duration: 500,
complete: function(){
$(clickedTab).animate({width: "70%"}, {duration: 500, complete: function(){
$(clickedTab + " > p").animate({
opacity: 1
}, 500);
}});
}});
}});
where currentTab and clickedTab are my div ids, like "#ct-1", and my html looks like that:
<div id="ct-1" class="content-div">
<p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="ct-2" class="content-div">
<p>bbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>
So the second animate doesn't run at all. I'm guessing this has somehting to do with the DOM, maybe I can't access a parent inside the animate ? maybe it's nothing to do with it...
Thanks in advance !
Robin
Assuming currentTab is ct-1 and clickedTab is ct-2, all of your animations are working in this fiddle:
http://jsfiddle.net/3k0x3c4L/
You won't notice the width shrink unless clickedTab has a background, which I've added in the fiddle.
Im just trying to move a div 40% to the left and then back to 0% on a click/toggle... not sure why its not working i have done it before where it works. For some reason this hides the NAV button and doesnt toggle....
Fiddle
jQuery
$("#mobileNav").toggle(function() {
$("#content").animate({ "left" : "40%" }, 500);
}, function() {
$("#content").animate({ "left" : "0%" }, 500);
});
html
<div class="header">
Nav
</div>
<div id="mainContain">
<div id="menu"></div>
<div id="content"></div>
</div>
That version of toggle has been deprecated and removed, now it only hides and shows stuff, but you can create your own toggle functionality :
$("#mobileNav").on('click', function() {
var toggle = $(this).data('toggle'),
dist = toggle ? '0%' : '40%';
$("#content").animate({ "left" : dist }, 500);
$(this).data('toggle', !toggle);
});
FIDDLE
It doesn't look like anything is triggering your animate calls. Try this
var toggle = false;
$("#mobileNav").click(function(){
toggle = !toggle;
if(toggle)
//do animations
else
//reverse the animations
});
I am currently working on a custom lightbox script and need some assistance. I have the animation for the image resizing working great, but I ran into a small problem. The lightbox is shown in the middle of the user's screen, but as soon as I animate the width and height, it doesn't remain in the center of the screen, and just uses the old left and top values.
Here's the markup for the lightbox itself:
<div id="jqgal_container">
<div id="jqgal_nav_left" class="jqgal_nav"><</div>
<div id="jqgal_main">
<div id="jqgal_main_img"></div>
<div id="jqgal_footer">
<div id="jqgal_main_caption"><p></p></div>
<div id="jqgal_thumbnav_left" class="jqgal_thumbnav"><</div>
<div id="jqgal_thumbs">
<div id="jqgal_thumbs_container">
<ul></ul>
</div>
</div>
<div id="jqgal_thumbnav_right" class="jqgal_thumbnav">></div>
</div>
</div>
<div id="jqapp_nav_right" class="jqgal_nav">></div>
</div>
The image to be displayed is stored within the #jqgal_main_img as an <img /> element. I animate the width and height of #jqgal_main_img, but I also want to keep the whole container (#jqgal_container) centered on the screen.
My question is, how can I animate the width of the child element, yet still animate the top and left positions of the container respectively, so it appears to expand and grow from the centre?
The code to animate the width and height of the image container at the moment looks as follows:
_resizeToFit : function(img_width, img_height, compFunc)
{
// Calculate the width and height needed:
var req_width = img_width;
var req_height = img_height;
this._elements.mainimg.animate({ width: req_width }, {
duration: 'fast',
complete: function() {
$.jqgal._elements.footer.width(req_width);
$.jqgal._elements.mainimg.animate({ height: req_height }, 'fast', function() {
if(compFunc != undefined) { compFunc.call(this); }
});
},
step : function() {
}
});
}
Also animate the margin-left and margin-top:
"margin-left" : ($(window).width() - req_width) / 2
"margin-top" : ($(window).height() - req_height) / 2
If the elements CSS position is 'absolute', change margin-top / margin-left to top and left.
EDIT:
At the end of the whole 'animate' string, add
.parent().animate({
"margin-left" : )($(window).width() - req_width) / 2) + this._elements.mainimg.parent().scrollLeft(),
"margin-top" : (($(window).height() - req_height) / 2 ) + this._elements.mainimg.parent().scrollTop()
}}
Or in the callback function:
$(this).parent().animate({...});
For ease, it might be best to set variables holding the elements too...
$this = this._elements.mainimg;
$parent = $this.parent();
Then the parent animate() data would look like this:
"margin-left" : )($(window).width() - req_width) / 2) + $parent.scrollLeft(),
"margin-top" : (($(window).height() - req_height) / 2 ) + $parent.scrollTop()
}}
Which is a little easier to read!
i think you should Animate too the margin's and left distance.
I'm using the anythingSlider by Chris Coyier.
Can anyone tell how to change from slide effect to fade effect?
Regrets,
Saulo
Well, as the core is at this time (v1.5.6.1), it isn't possible to transition between the two slides in a fade transition, but you can use the FX extension to fade in the next image. Try something like this:
$('#slider')
.anythingSlider({
animationTime : 0
})
.anythingSliderFx({
inFx: {
'img' : { opacity: 1, duration: 500 }
},
outFx: {
'img' : { opacity: 0, duration: 0 }
}
Setting "animationTIme" and the outFx time to zero will ensure the previous image isn't seen (no sliding), but the inFx (fadeIn) will be on a transparent background. I don't know if that will fullfill your needs.