0

css我正在尝试使用and制作全屏滑块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/

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

4

1 回答 1

0

这里有几个问题：

  • 您正在收听 transitionEnd 但您没有区分正在过渡的内容和正在过渡的内容
  • addClass 不采用回调函数来告诉你什么时候完成 - 这些函数中的代码永远不会被调用
  • 如果正在为多个属性设置动画，您将获得多个 animationEnd 事件
  • 你的两个动作和不同的类正在互相破坏。在淡入/淡出和 animationStuff 之间，事情会变得有点混乱。

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

工作示例

代码：

$(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');
        });
    });
});
于 2013-09-02T20:41:45.800 回答