0

我正在这里做一个滑块。我正在做的是在一个按钮上单击下一步，我正在淡出图像，然后动态更改源然后淡入。现在我不是用 fadeOut() 函数来执行此操作，而不是通过添加一个来执行此操作不透明度为 0 的 css 类 fadeOut，然后在更改 src 后删除该类。我怎样才能做到这一点？在它淡入之前我还需要一些时间，我尝试了 addClass() 和 removeClass() 方法，但它们太快了，以至于淡入淡出没有显示出来。请帮忙。谢谢。

这是下一个按钮处理程序的代码

 $('#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 功能，但它直到无法正常工作。

4

4 回答 4

1

You haven't posted your actual code but I imagine you want something like this. When the next link/button is clicked, it will fade out your image, edit the src attribute to the new image and then fade in the image again.

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

$('#next').click(function (e) {
    e.preventDefault();
    $('selectorForImg').fadeOut(function() {
        $('selectorForImg').attr('src', newSrcLocation).fadeIn(500);
    }, 500);
});
于 2013-10-14T16:27:44.370 回答
1

好吧，我不太确定，因为我对您目前拥有的代码一无所知，但可能是这样的。

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

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

于 2013-10-14T16:27:57.577 回答
0

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

@-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/

于 2013-10-14T16:35:45.507 回答
0

无论您希望在另一件事开始之前完成某件事，请将其包含在 function() 中；

于 2013-10-16T15:37:01.857 回答