How to animate the caption for each slide individually

Question

I have made a custom jquery slideshow which is working as required. The only thing remaining is animating the caption inside the slide. I want the caption to respond to the current slide but the problem is all of the captions respond no matter which slide is showing. I cannot seem to fix this issue.

<body>
    <div class="marquee_container">
        <div class="holder">
            <div class="slide">
                <img class="marquee_panel_photo" src="images/photos/london.jpg" alt="London" />
                <div class="marquee_caption">
                    <div class="marquee_caption_content">
                        <p>Content goes here</p>
                    </div>
                </div>
            </div>
            <div class="slide">
                <img class="marquee_panel_photo" src="images/photos/milan.jpg" alt="milan" />
                <div class="marquee_caption">
                    <div class="marquee_caption_content">
                        <p>Content goes here</p>
                    </div>
                </div>
            </div>
            <div class="slide">
               <img class="marquee_panel_photo" src="images/photos/staugustine.jpg" alt="staugustine" />
                <div class="marquee_caption">
                    <div class="marquee_caption_content">
                        <p>Content goes here</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="marquee_nav">
        </div>
    </div>
</body>
</html>

CSS

.marquee_container { 
    width: 700px; 
    height: 350px; 
    overflow: hidden; 
    margin: 0px 0px 30px 0px; 
    padding: 0px; 
    position:relative;
}
.holder{
    overflow: hidden;
    position: relative;
    width: 9999px; 
    height: 350px; 
}
.slide{
    width: 700px;
    float: left;
    position:relative;
}
.marquee_photos { 
    overflow:hidden;
}
.marquee_photos img{
    display:block;
}
.marquee_caption {
    width: 700px;
    margin: 0px;
    padding: 15px 0px 10px 0px;
    color: #fff;
    position: absolute;
    top: 350px;
    left: 0px;
    background: url(images/template/marquee_caption.png) 0px 0px;
}
.marquee_caption_content { 
    width: 410px;
    padding: 0px 0px 0px 25px;
}
.marquee_nav{
    position:absolute;
    bottom:5px;
    right:0;    
}
.marquee_nav .marquee_nav_item{
    color:#fff;
    text-decoration:none;
    background:url(images/template/nav_buttons.png) no-repeat;
    text-indent:-9999px;
    overflow:hidden;
    display:block;
    width:17px;
    height:18px;
    float:left;
    margin:0 4px;
}
.marquee_nav .marquee_nav_item:hover{
    background:url(images/template/nav_buttons.png) no-repeat -25px 0;
}
.marquee_nav .marquee_nav_item.selected{
    background:url(images/template/nav_buttons.png) no-repeat -50px 0;
}

JQUERY

$(document).ready(function(){

    //1st STEP
    //generating nav links automatically
    //for each slide there should be a nav item
    $('.slide').each(function(index, value){

        $('.marquee_nav').append('<a href="#" class="marquee_nav_item"></a>');

    });

    //2nd STEP
    //setting the nav links and running the slide
    $('.marquee_nav .marquee_nav_item').on('click', function(){

        $('.marquee_nav_item').removeClass('selected');
        $(this).addClass('selected');

        //3rd STEP
        //animating the slideshow
        //getting the index value of the clicked nav
        var navClick = $(this).index();

        /* holder width set to the parent width because the holder width is 9999px and we will use that to change
           the margin-left position of the images */
        var holderWidth = $('.marquee_container').width();

        /* position of the new img according to the nav item clicked. If the 3 nav item is clicked jquery will get that
           index value and will multiply it with the holder width to know how much distance it has to move for eg.
           if the 2nd nav is clicked, the index is 1, so 1 * with the holderWidth which is 700 = 700. So it will move margin-left
            -700px. See the animate function below */
        var photoPosition = navClick * holderWidth;
        //alert(photoPosition);

        //slideshow animation
        $('.marquee_container .holder').animate({'margin-left' : -photoPosition}, 1000);

        //animating the caption
        $('.marquee_caption').animate({'top':275}, 500);

    });
});

Tahir Ahmed · Accepted Answer · 2015-08-02T14:25:13.663

Perhaps you need to first send all the .marquee_caption elements back to their original position and then bring only the selected one into the view.

Something like:

...
$('.marquee_caption').not(':eq(' + navClick + ')').animate({ 'top': 200 }, 500);
$('.marquee_caption').eq(navClick).animate({ 'top': 100 }, 500);
...

where navClick is the variable you already have in your code which stores .index() of the selected navigation element. And .eq() is the jQuery method you pass this navClick value into.

Here is a modified jsFiddle as an example using your own code for simplicity sake.

Hope this is what you were looking for.

Update:

The .eq() method of jQuery takes an index parameter to retrieve only one element out of a set of elements.
The .not() method selects everything except the selector rule passed to it.
So in the first line above, out of the 3 .marquee_caption elements, we are selecting all elements except the currently selected one as per the navClick index. So the resulting jQuery object contains 2 out of 3 elements. And then we .animate() them as usual.
Finally, you can simply trigger the click event on the respective .marquee_nav_item element by utilising the same .eq() method i.e. just before your $(document).ready(...) function closes, add this: $('.marquee_nav .marquee_nav_item').eq(0).trigger('click');.
This is one of the options by the way, and probably the quickest and dirtiest. What is happening is that you are triggering the click event manually and hence everything, defined in the click function above, follows.

Awesome, this is exactly what I was looking for, thank you so much. Can you explain this code in a little bit more detail or provide any helpful link. One more thing. How can I show the first slide active on page load? Right now neither the caption is active nor is the nav item selected — Muhammad Ameen Sheikh, Aug 02 '15 at 13:58
added an **Update** above. hope it helps. Also read **[this](http://stackoverflow.com/questions/12057251/opposite-of-jquerys-eq)**. — Tahir Ahmed, Aug 02 '15 at 14:25

score 0 · Answer 2 · answered Aug 02 '15 at 12:29

0

//animation the caption
$(this).parents('.slide').find('.marquee_caption').animate({'top':275}, 500);

Is this what you mean?

answered Aug 02 '15 at 12:29

Paul M

366
1
3
8

No, I want the current slide caption to animate but the problem is that all the captions are animating at the same time. – Muhammad Ameen Sheikh Aug 02 '15 at 13:54

How to animate the caption for each slide individually

2 Answers2