如何分别为每张幻灯片的标题设置动画答案

【问题标题】：How to animate the caption for each slide individually如何分别为每张幻灯片的标题设置动画
【发布时间】：2015-08-02 22:25:13
【问题描述】：

我制作了一个自定义的 jquery 幻灯片，它可以按要求工作。唯一剩下的就是为幻灯片内的标题设置动画。我希望标题响应当前幻灯片，但问题是所有标题都响应，无论显示哪张幻灯片。我似乎无法解决这个问题。

<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);

    });
});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

也许您需要先将所有 .marquee_caption 元素发送回其原始位置，然后仅将选定的元素带入视图。

类似：

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

其中navClick 是您的代码中已有的变量，用于存储所选导航元素的.index()。而.eq() 是您将这个navClick 值传递给的jQuery 方法。

为了简单起见，这里以修改后的 jsFiddle 为例，使用您自己的代码。

希望这就是您想要的。

更新：

jQuery 的.eq() 方法采用index 参数来仅检索一组元素中的一个元素。
.not() 方法选择所有除了传递给它的选择器规则。
所以在上面的第一行中，在 3 .marquee_caption 元素中，我们选择所有元素除了当前选择的元素根据navClick 索引。所以生成的 jQuery 对象包含 2 out of 3 元素。然后我们照常.animate()他们。
最后，您可以使用相同的.eq() 方法，即在您的$(document).ready(...) 函数关闭之前，在相应的.marquee_nav_item 元素上简单地触发click 事件，添加：$('.marquee_nav .marquee_nav_item').eq(0).trigger('click');。
顺便说一下，这是选项之一，可能是最快和最脏的。发生的事情是您手动触发 click 事件，因此在上面的 click 函数中定义的所有内容都会跟随。

【讨论】：

太棒了，这正是我想要的，非常感谢。您能否更详细地解释此代码或提供任何有用的链接。还有一件事。如何显示页面加载时活动的第一张幻灯片？现在既没有标题也没有选择导航项
在上面添加了一个更新。希望能帮助到你。另请阅读this。

【解决方案2】：

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

这是你的意思吗？

【讨论】：

不，我希望当前的幻灯片标题具有动画效果，但问题是所有标题都同时具有动画效果。