Skip to content

Commit

Permalink
Update jquery.flexslider.js to allow CSS3 animations on the caption
Browse files Browse the repository at this point in the history 
To allow CSS3 animations on the caption every time a slide is changed, I removed the caption paragraph from the DOM and reattached in. This allows users to add CSS3 animations such as slide ins directly to the caption and it ensures it will work with every slide change.
  • Loading branch information
@Fastone45
Fastone45 committed Oct 1, 2013
1 parent ca347d4 commit 939decf
Showing 1 changed file with 3 additions and 0 deletions.
3 changes: 3 additions & 0 deletions jquery.flexslider.js
View file
Expand Up @@ -738,6 +738,9 @@
// SMOOTH HEIGHT:
if (slider.vars.smoothHeight) methods.smoothHeight(slider.vars.animationSpeed);
}
// ALLOW CAPTION CSS3 ANIMATION:
var caption = $( ".flex-active-slide .flex-caption" ).detach();
caption.appendTo(".flex-active-slide");
}
slider.wrapup = function(dimension) {
// SLIDE:
Expand Down

4 comments on commit 939decf

@andrewandrei
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you so much:)

@morganfeeney
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was much needed, well for me it was ;)

@Dr-Sabbir
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a problem when you use more than one slide on a page. It will just keep creating flexi-caption div and resulting slowing the computer. It seems it runs into a unlimited loop and makes you computer crush.

@pstonier
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of doing this, you can just apply the animation in your css like this.

.flex-active-slide .flex-caption {
max-width: 320px;
position: relative;
-webkit-animation: slideIn;
-moz-animation: slideIn;
-o-animation: slideIn;
animation: slideIn;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}

Please sign in to comment.