Question

我正在尝试使用css和jquery创建一个全屏滑块。所以基本的想法是添加和删除带有css3动画的类。滑块在第一眼看上去很好，当我点击一个拇指（屏幕的底部）时，滑块可以很好地改变图像，但是当我点击另一个拇指时，一切都会逐渐淡出。我需要的是根据拇指淡出的图像.. 我创造了一个完整评论的小提琴，以便你们可以理解。我正在努力解决这个问题，但无法弄清楚我做错了什么问题。

$(document).ready(function () {
    $('#thumbsList>li').click(function () {

        //Getting Id from thumbnail or Full Image Refeence.

    var clickedFullImageId = $(this).data("fullimageid");

    //Save an BG image element which as actually clicked.
    var selectedBigImage = $('.backgroundImages[data-fullImageId="' + clickedFullImageId + '"]');



    //Z index should be placed here somewhere.


    //Removing Animation class of the Images which were not clicked.
    $('.backgroundImages').not(selectedBigImage).addClass('fadeOut', function () {
      $('.backgroundImages').removeClass('animationStuff');

        selectedBigImage.addClass('fadeIn');


    });


    // Displaying the Bg Img which was clicked by Thumb
    selectedBigImage.show();


    selectedBigImage.addClass('animationStuff');

});});

完整代码可在此处找到。的 http://jsfiddle.net/thL7X/

请告诉我如何处理这个问题。感谢。

Answer 1

这里有几个问题：

您正在倾听transitionEnd，但您没有区分正在转换的内容和正在转换的内容
addClass没有采用回调函数来告诉你什么时候完成 - 这些函数中的代码永远不会被调用
如果要为多个属性设置动画，您将获得多个animationEnd事件
你的两个动作和不同的课程互相辱骂。在fadeIn / Out和animationStuff之间，事情会变得有点笨拙。

我对原始代码进行了一些更改，包括一些样式并设法使其正常工作。您可能需要稍微调整一下以获得所需的最终效果。

Working example

代码：

$(document).ready(function () {
    //Settings//
    var autoPlay = "True";
    //End Setting//

    //Display Logo //
    $('#logo').delay(1000).fadeIn(3000);

    var currentImage = 0;
    var $backgroundImages = $('.backgroundImages');

    //Setting first image to Display
    var firstBgImage = $backgroundImages.eq(currentImage);
    firstBgImage.show(); //Displays the First Image//
    firstBgImage.addClass('animationStuff coming'); //Starts the Animation of First Image//

    $('.backgroundImages').on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function (evt) {
        // If Autplay is True //
        if (autoPlay == "True") {
            /*Fades out First Image and then Removes the Animation Class so that
            be set to 1.33 Zoom level and when clicked again be animated.  */
            var $this = $(this);

            if($this.hasClass('coming')) {
                $this.addClass('going').removeClass('coming').addClass('fadeOut');

                currentImage = (currentImage + 1) % $backgroundImages.length;            

                $backgroundImages.eq(currentImage).hide(function() {
                    $backgroundImages.eq(currentImage).removeClass('fadeOut animationStuff going');
                    $backgroundImages.eq(currentImage).show(function() {
                        $backgroundImages.eq(currentImage).addClass('animationStuff coming'); 
                    });
                });
            }
        }
    });

    $('#thumbsList>li').click(function () {
        autoPlay = false;

        //Getting Id from thumbnail or Full Image Refeence.
        var clickedFullImageId = $(this).data("fullimageid");

        //Save an BG image element which as actually clicked.
        var selectedBigImage = $('.backgroundImages[data-fullImageId="' + clickedFullImageId + '"]');

        //Removing Animation class of the Images which were not clicked.
        $('.backgroundImages.coming').addClass('fadeOut going').removeClass('coming fadeIn');

        selectedBigImage.show(function() {
            selectedBigImage.addClass('fadeIn animationStuff coming').removeClass('fadeOut going');
        });
    });
});

无法使用css3为全屏滑块设置z-index

1 个答案: