Question

我想要一个简单的div淡入并同时移动。假设顶部有一个隐藏的图像，当我点击一个按钮时，图像应该出现在页面的中心，并且效果会逐渐消失。

但对我来说，它首先消失然后开始移动......

        $('#shelf').fadeIn('fast').animate({
            'bottom': '54%'
            }, 'slow', function() {
            // Animation complete.
        });

Answer 1

试试这个

$('#shelf').fadeIn('fast').animate({
            'bottom': '54%'
            }, {duration: 'slow', queue: false}, function() {
            // Animation complete.
        });

Answer 2

使用：

$('#shelf').animate({
        'bottom': '54%',
        'opacity': 1
        }, 'slow', function() {
        // Animation complete.
});

Answer 3

jQuery链接事件，所以它认为：“完成fadeIn，然后做这个动画。”

如果在动画中包含淡入淡出代码（例如：opacity: 100%;），它会立即执行所有操作。

Answer 4

jQuery链接事件并按顺序运行它们，这就是为什么淡入淡出发生在动画之前。

以下是使用CSS3过渡属性来处理动画的示例。

http://jsfiddle.net/jdmiller82/UMVnD/

Answer 5

$('#shelf')..fadeTo(2000, 1).animate({
            'bottom': '54%'
            }, {duration: 'slow', queue: false}, function() {
            // Animation complete.
});

Answer 6

因为你首先在链中放入fadeIn（）。尝试将两者分成两个单独的调用：

    $('#shelf').fadeIn('fast');

    $('#shelf').animate({
        'bottom': '54%'
        }, 'slow', function() {
        // Animation complete.
    });

Answer 7

嗯，你快速消失，但移动缓慢。它们都是在同一时间开始，但你首先注意到了淡入淡出。

使它们都相同，它们都会同时出现。

淡入并移动

7 个答案: