Question

我在这里正在制作一个滑块。我正在做的是点击按钮说下一步，我正在淡出一个图像然后动态改变源然后淡入。现在我不是用fadeOut（）函数做这个，而不是我这样做通过添加一个css类fadeOut，其中opacity为0，然后在更改src后删除类。我怎么能做到这一点？我也需要一些时间才能消失，我尝试了addClass（）和removeClass（）方法，但它们是如此qucik，以至于不显示淡入淡出。请帮忙。感谢。

以下是Next Button处理程序的代码

 $('#nextHandler').click( function() {
        var nextListItem = ul.find('li.current').next();
        if ( nextListItem.length > 0 ) {
            ul.find('li.current').removeClass('current');
            nextListItem.addClass('current');
            var imagePath = ul.find('li.current').children('img').data("fullsrc");

            $('#fullImagePlaceholder').fadeOut(function () {
                $('#fullImagePlaceholder').attr('src', imagePath).fadeIn(500);
            }, 500);
        }
    });
});

现在我添加了FadeOut功能，但直到不工作。

Answer 1

你还没有发布你的实际代码，但我想你想要这样的东西。单击下一个链接/按钮后，它将淡出图像，将src属性编辑为新图像，然后再次淡入图像。

var selectorForImg = 'img';
var newSrcLocation = 'img2.jpg';

$('#next').click(function (e) {
    e.preventDefault();
    $('selectorForImg').fadeOut(function() {
        $('selectorForImg').attr('src', newSrcLocation).fadeIn(500);
    }, 500);
});

Answer 2

嗯，我不太确定，因为我对你目前的代码一无所知，但也许是这样的。

$(this).fadeOut("fast", function(){
        $(this).attr("background-image", "url([name of new image])").fadeIn("fast");
});

类似这样的东西，这是作为背景图像应用的图像的容器。

Answer 3

您可以使用css关键帧动画。即

@-webkit-keyframes animation-name {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes animation-name {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes animation-name {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes animation-name {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

div{
-webkit-animation: animation-name 0.6s ease-in 0.8s both;
-moz-animation: animation-name 0.6s ease-in 0.8s both;
-o-animation: animation-name 0.6s ease-in 0.8s both;
-ms-animation: animation-name 0.6s ease-in 0.8s both;
animation: animation-name 0.6s ease-in 0.8s both;
}

我在这里也发了一个例子： http://jsfiddle.net/guqv7/

Answer 4

每当你想要在另一件事开始之前完成某事时，将它包含在一个函数（）中;

淡出图像然后更改源并再次更改图像中的淡入淡出

4 个答案: