animate bootstrap carousel-caption

0
votes

I would like to add animation effect on carousel-caption in bootstrap-carousel.js, here is an example on how it will animate carousel-caption elements when slide change

http://jsfiddle.net/TuDWV/ (click Run that effect i need on slide change)

Here is my actual carousel where I need that effect on h1,p and href tags within carousel-caption div class. http://jsfiddle.net/ww67B/

    <div class="carousel-caption">
      <h1>Example headline.</h1>
      <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <a class="btn btn-large btn-primary" href="#">Sign up today</a>
    </div>

I tried to implement it with slid or slide options but it does not move elements:

$('#myCarousel').bind('slid', function() {
    $(".carousel-caption h1").animate(
            {"left": "+=400px"},
            "slow");    
});

Best Regards

1
javascriptjquerycsstwitter-bootstrap

1 Answers

0
votes
$('#myCarousel').bind('slid', function() {
    $(".carousel-caption h1").animate(
            {"left": "+=400px"},
            "slow");    
});

Above works great, I just had to set position: absolute for all elements which I need to animate.