Question

我试图让这4个div在一个接一个地淡入淡出，这很好但我想也要添加缩放效果，从大到正常大小。到目前为止，这是我的代码。有什么建议吗？

<script type="text/javascript">
     $('.color1').hide().fadeIn(500).animate({scale: '-=.1'}, 1000);  
     $('.color2').hide().fadeIn(1000).animate({scale: '-=.1'}, 1000); 
    $('.color3').hide().fadeIn(1500).animate({scale: '-=.1'}, 1000); 
     $('.color4').hide().fadeIn(2000).animate({scale: '-=.1'}, 1000); 
</script>
<div class="logoDot color1"></div>
<div class="logoDot color2"></div>
<div class="logoDot color3"></div>
<div class="logoDot color4"></div>

Answer 1

这样的事情：

// Configure initial parameters
var from = {height: 100, width: 100};
var to = {opacity: 1, height: 30, width: 30};

$('.color1').css(from).animate(to, 500);
$('.color2').css(from).animate(to, 1000);
$('.color3').css(from).animate(to, 1500); 
$('.color4').css(from).animate(to, 2000);

演示：http://jsfiddle.net/54pgp/1/

Answer 2

你真的不需要很多jQuery来做这个，你可以使用CSS过渡来扩展不透明度和缩放比例。我在您的文本周围添加了跨度，以确保只有文本缩放而不是元素。

<强> DEMO

删除缩放类时会触发转换。

CSS

.logoDot span.scale {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
}

.logoDot span {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    display: inline-block; 
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.color1 span {        
    -webkit-transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    transition-delay: .5s;
}

.color2 span {        
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
}

.color3 span {        
    -webkit-transition-delay: 1.5s;
    -moz-transition-delay: 1.5s;
    -o-transition-delay: 1.5s;
    transition-delay: 1.5s;
}

.color4 span {        
    -webkit-transition-delay: 2s;
    -moz-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
}

HTML

<div class="logoDot color1">
    <span class="scale">Test 1</span>
</div>
<div class="logoDot color2">
    <span class="scale">Test 2</span>
</div>
<div class="logoDot color3">
    <span class="scale">Test 3</span>
</div>
<div class="logoDot color4">
    <span class="scale">Test 4</span>
</div>

触发动画

$('span').removeClass("scale")

淡入并缩小页面加载时的div

2 个答案:

演示：http://jsfiddle.net/54pgp/1/