2

我试图让两个不同的 div 分别上下滑动而不点击。现在我正试图向上滑动，但它不起作用。我正在使用这个：

<script type="text/javascript">
  $(document).ready(function(){
    $('#cover').hide();
    $('#cover').slideUp(300).delay(800).fadeIn(400);
  });
</script>

然后我有一个里面有内容的 div id="cover"。有效，fadeIn但它不会向上滑动。有没有办法做到这一点而无需点击？

所有的帮助都会很棒！

4

4 回答 4

0

就像@Mike Edwards 所说slideUp()的用于隐藏并slideDown()用于展示。您可能想为此使用slideDown()，但如果您要同时使用slideDown()and fadeIn()，我认为它无法完成（即使使用delay()或设置queue:false）。

slideDown()我用and实现了类似的效果.animate('opacity')。

$('#cover').hide().css({'opacity':0});

$('#cover').slideDown('slow').animate({opacity:1}, {queue:false, duration:'slow'});

这是jsfiddle

于 2013-11-14T01:26:15.053 回答
0

显然确保已加载 JQuery。（您没有收到“$ 未定义”错误）您可以使用“之后”触发器来链接操作。

如果你的目标是 slideUp 和 slideDown 你可以做这样的事情。

    $('#cover').slideUp(300).after(function() { 
        $(this).slideDown(300);
    });

要查看此操作：http: //jsfiddle.net/U3LVR/

于 2013-11-14T01:27:59.897 回答
0

如果你有两个不同的 div 和两种动画，你可以在每个效果中使用回调或使用 promise 来确保所有效果都已完成。

例如：

<script type="text/javascript">
  $(document).ready(function(){
    $('#div1').slideUp(300).promise().done(function() {
       $('#div2').fadeIn(400, function() {
          //your next code here...
       });
    });
  });
</script>
于 2013-11-14T01:28:05.410 回答
0

您可以使用 javascript 更改 div 的位置并使用 css 进行过渡/动画

于 2013-11-14T00:49:33.813 回答